/* ==========================================================================
   Hub Pages — M3 Design System
   /products/, /docs/, /learn/
   ========================================================================== */

/* --- Shared hub layout --- */
.pc-hub-page {
    max-width: var(--pc-container-max);
    margin: 0 auto;
    padding: var(--pc-space-2xl) var(--pc-space-lg);
}

.pc-hub-header {
    margin-bottom: var(--pc-space-2xl);
}

.pc-hub-header h1 {
    font: var(--type-headline-lg);
    font-weight: 700;
    color: var(--fg1);
    margin-bottom: var(--pc-space-sm);
}

.pc-hub-header p {
    font: var(--type-body-lg);
    color: var(--fg2);
    max-width: 600px;
}


/* --- Products Hub --- */
.pc-products-category {
    margin-bottom: var(--pc-space-2xl);
}

.pc-products-category h2 {
    font: var(--type-title-lg);
    font-weight: 700;
    color: var(--fg1);
    margin-bottom: 4px;
}

.pc-products-category-desc {
    font: var(--type-body-md);
    color: var(--fg2);
    margin-bottom: var(--pc-space-lg);
}

.pc-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}


/* --- Docs Hub --- */

/* M3 Filter Chips */
.pc-docs-hub-filters {
    display: flex;
    gap: var(--pc-space-sm);
    margin-bottom: var(--pc-space-lg);
    flex-wrap: wrap;
}

.pc-docs-hub-filter {
    padding: 0 16px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-outline);
    background: var(--color-surface);
    font: var(--type-label-lg);
    color: var(--fg2);
    cursor: pointer;
    font-family: var(--pc-font-family);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition: all var(--duration-short) var(--easing-standard);
}

/* State layer on filter chips */
.pc-docs-hub-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fg2);
    opacity: 0;
    transition: opacity var(--duration-short) var(--easing-standard);
    pointer-events: none;
    border-radius: inherit;
}

.pc-docs-hub-filter:hover::before {
    opacity: var(--state-hover);
}

.pc-docs-hub-filter:hover {
    border-color: var(--fg2);
}

/* Active filter chip — M3: filled with secondary-container */
.pc-docs-hub-filter.active {
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    border-color: transparent;
}

.pc-docs-hub-filter.active::before {
    background: var(--color-on-secondary-container);
}

.pc-docs-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.pc-docs-hub-product-group {
    margin-bottom: var(--pc-space-2xl);
}

.pc-docs-hub-product-group h3 {
    font: var(--type-title-md);
    font-weight: 600;
    color: var(--fg1);
    margin-bottom: var(--pc-space-md);
    padding-bottom: var(--pc-space-sm);
    border-bottom: 1px solid var(--color-outline-variant);
}


/* --- Homepage --- */
/* v3.0 hero base: dark-blue gradient. v3.1 layers an optional rotating
   board photo behind the gradient with a darkening overlay, so text stays
   white-on-dark. When .has-photos is absent the gradient + amber radial
   stand alone (current behaviour). */
.pc-home-hero {
    background:
        radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0) 40%),
        linear-gradient(135deg, #0A2933 0%, #1F4E5E 55%, #2C6E84 100%);
    color: #FFFFFF;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
}

/* --- Rotating hero photo layer (v3.1) ------------------------------------
   All variants render in the DOM. CSS hides them all by default; the
   `.is-active` class shows one. PHP sets one .is-active for first paint;
   inline JS picks a different random one client-side, so cached HTML stays
   identical for every visitor and the page cache works fine.

   Photos sit absolute-positioned behind the gradient overlay. The overlay
   uses the v3 hero gradient at high opacity to keep WCAG AA contrast on
   the white headline. Amber radial accent stays. */
.pc-home-hero.has-photos {
    /* When photos are active, the section element only renders the radial.
       The base linear gradient moves to .pc-home-hero-overlay so it can
       sit above the photo. */
    background:
        radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 45%),
        #0A2933;
}

.pc-home-hero-photos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.pc-hero-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--duration-medium) var(--easing-standard);
}

.pc-hero-photo.is-active {
    opacity: 1;
}

.pc-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Slightly desaturated + a hint of cool so the amber radial pops over it. */
    filter: saturate(0.85);
}

/* Darkening overlay on top of the photo.
   135deg gradient from very-dark blue (top-left) to brand blue (bottom-right),
   with enough alpha to hold contrast on every photo while still letting the
   board photography come through. */
.pc-home-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(10, 41, 51, 0.88) 0%,
        rgba(31, 78, 94, 0.78) 55%,
        rgba(44, 110, 132, 0.72) 100%
    );
    pointer-events: none;
}

/* When there are no photos the overlay is invisible (already handled by the
   element having transparent inset on a transparent parent). Hide it
   explicitly so it never paints. */
.pc-home-hero:not(.has-photos) .pc-home-hero-overlay {
    display: none;
}

/* Reduced-motion: kill the cross-fade — switch is instantaneous. */
@media (prefers-reduced-motion: reduce) {
    .pc-hero-photo {
        transition: none;
    }
}

.pc-home-hero-inner {
    max-width: var(--pc-container-max);
    margin: 0 auto;
    padding: 0 var(--pc-space-lg);
    position: relative;
    z-index: 1;
}

.pc-home-hero-content {
    max-width: 640px;
}

.pc-home-hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pc-accent);
    margin-bottom: var(--pc-space-md);
}

/* H1 inherits Saira/uppercase from style.css; just size it for hero context */
.pc-home-hero h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: var(--pc-space-md);
}

.pc-home-hero-desc {
    font: var(--type-body-lg);
    opacity: 0.88;
    line-height: 1.55;
    color: #FFFFFF;
    margin-bottom: var(--pc-space-xl);
    max-width: 560px;
}

.pc-home-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Outlined hero CTA — sits next to the amber Browse Products button.
   Glassy white outline on dark gradient, no background fill. */
.pc-home-hero-actions .pc-btn-hero-outlined {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition:
        background-color var(--duration-short) var(--easing-standard),
        border-color var(--duration-short) var(--easing-standard);
}

.pc-home-hero-actions .pc-btn-hero-outlined:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
}

.pc-home-section {
    padding: var(--pc-space-3xl) 0;
}

.pc-home-section-inner {
    max-width: var(--pc-container-max);
    margin: 0 auto;
    padding: 0 var(--pc-space-lg);
}

.pc-home-section h2 {
    font: var(--type-headline-sm);
    font-weight: 700;
    margin-bottom: var(--pc-space-sm);
}

.pc-home-section-desc {
    color: var(--fg2);
    margin-bottom: var(--pc-space-xl);
}

.pc-home-why {
    background: var(--color-surface-container-low);
    border-top: 1px solid var(--color-outline-variant);
}

.pc-home-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pc-space-xl);
}

.pc-home-why-item {
    text-align: center;
    padding: var(--pc-space-lg);
}

.pc-home-why-item .material-symbols-outlined {
    font-size: 36px;
    color: var(--color-primary);
    margin-bottom: var(--pc-space-sm);
}

.pc-home-why-item h3 {
    font: var(--type-title-sm);
    font-weight: 600;
    margin-bottom: var(--pc-space-sm);
}

.pc-home-why-item p {
    font: var(--type-body-md);
    color: var(--fg2);
    line-height: 1.5;
}

.pc-home-docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pc-space-2xl);
    align-items: center;
}

.pc-home-docs-card {
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--pc-space-xl);
}

.pc-home-docs-card-label {
    font: var(--type-label-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-outline);
    font-weight: 600;
    margin-bottom: var(--pc-space-md);
}

.pc-home-doc-item {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: inherit;
}

.pc-home-doc-item:last-child {
    border-bottom: none;
}

.pc-home-doc-title {
    font: var(--type-body-md);
    font-weight: 600;
    color: var(--fg1);
}

.pc-home-doc-product {
    font: var(--type-body-sm);
    color: var(--color-outline);
    margin-top: 2px;
}

.pc-home-link {
    color: var(--color-primary);
    font: var(--type-label-lg);
    font-weight: 600;
    text-decoration: none;
}

.pc-home-link:hover {
    text-decoration: underline;
}

/* Homepage responsive */
@media (max-width: 768px) {
    .pc-home-why-grid { grid-template-columns: 1fr; }
    .pc-home-docs-grid { grid-template-columns: 1fr; }
    .pc-home-hero { padding: 64px 0; }
    .pc-home-hero h1 {
        font-size: 36px;
        line-height: 1.10;
    }
    .pc-home-hero-desc { font: var(--type-body-md); }
}


/* --- Learn Hub --- */
.pc-learn-hero {
    background:
        radial-gradient(circle at 90% 20%, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 45%),
        linear-gradient(135deg, #0A2933 0%, #1F4E5E 55%, #2C6E84 100%);
    color: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: var(--pc-space-2xl) var(--pc-space-xl);
    margin-bottom: var(--pc-space-2xl);
}

.pc-learn-hero h2 {
    font: var(--type-headline-sm);
    font-weight: 700;
    margin-bottom: var(--pc-space-sm);
}

.pc-learn-hero p {
    font: var(--type-body-lg);
    opacity: 0.85;
    max-width: 500px;
}

.pc-learn-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* M3 Outlined Card */
.pc-learn-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--pc-space-lg);
    background: var(--color-surface);
    position: relative;
    overflow: hidden;
    transition: border-color var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-medium) var(--easing-standard);
}

/* State layer */
.pc-learn-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fg1);
    opacity: 0;
    transition: opacity var(--duration-short) var(--easing-standard);
    pointer-events: none;
    border-radius: inherit;
}

.pc-learn-card:hover::before {
    opacity: var(--state-hover);
}

.pc-learn-card:hover {
    box-shadow: var(--elevation-1);
    border-color: var(--color-outline);
}

.pc-learn-card-category {
    font: var(--type-label-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--pc-space-sm);
    position: relative;
    z-index: 2;
}

.pc-learn-card h3 {
    font: var(--type-title-md);
    font-weight: 600;
    margin-bottom: var(--pc-space-sm);
    color: var(--fg1);
    position: relative;
    z-index: 2;
}

.pc-learn-card p {
    font: var(--type-body-sm);
    color: var(--fg2);
    margin-bottom: var(--pc-space-md);
    position: relative;
    z-index: 2;
}

.pc-learn-card-meta {
    font: var(--type-label-sm);
    color: var(--color-outline);
    display: flex;
    gap: var(--pc-space-md);
    position: relative;
    z-index: 2;
}