/* Partner Portal (Helicopter Flight Services microsite) */

.partner-portal {
    padding-bottom: 60px;
}

/* Heading + section nav */
.partner-portal__heading {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.partner-portal__subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin-top: 10px;
    font-size: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.partner-portal__subnav-link {
    color: #222;
    padding: 0 16px;
    text-decoration: none;
}

.partner-portal__subnav-link + .partner-portal__subnav-link {
    border-left: 1px solid #999;
}

.partner-portal__subnav-link.is-active {
    font-weight: 700;
}

.partner-portal__subnav-link:hover {
    text-decoration: underline;
}

.partner-portal__logout {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
}

.partner-portal__logout a {
    color: #777;
}

.partner-portal__content {
    max-width: 900px;
    margin: 0 auto 30px;
}

.partner-portal__cta {
    text-align: center;
    margin-top: 30px;
}

/* Start page CTA: text 2x bigger (client request) */
.partner-portal__cta-btn {
    font-size: 24px;
    line-height: 1.2;
    padding: 18px 36px;
}

/* Partners page — contacts + form columns */
.partner-portal__columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin: 40px 0;
}

.partner-contact {
    margin-bottom: 30px;
}

/* Portrait rectangle, matching the team page photos (client request).
   Fixed 180px width would force grid tracks wider than a mobile column
   can offer; scale as a percentage instead so it fits any column and
   never forces horizontal overflow (silently clipped by body's global
   overflow-x: hidden). */
.partner-contact__photo img {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 9 / 11;
    object-fit: cover;
    object-position: top;
}

.partner-contact__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    font-size: 14px;
}

.partner-contact__photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 9 / 11;
    border: 1px solid #c00;
    color: #555;
    font-size: 13px;
    text-align: center;
    padding: 8px;
}

/* Form styled like the mockup: stacked labels, full-width fields, black SUBMIT */
.partner-portal__form .form__item {
    width: 100%;
    margin-bottom: 18px;
    /* The site header is position:fixed with no scroll offset anywhere in
       the theme, so the browser's native "scroll to first invalid field"
       behavior (failed required-field validation) tucks the field right
       under the header, hiding its label and error text. */
    scroll-margin-top: 100px;
}

.partner-portal__form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.partner-portal__form input[type="text"],
.partner-portal__form input[type="email"],
.partner-portal__form input[type="tel"],
.partner-portal__form input[type="password"],
.partner-portal__form textarea {
    width: 100%;
    border: 1px solid #bbb;
    padding: 10px;
    font: inherit;
}

.partner-portal__form textarea {
    min-height: 120px;
}

.partner-portal__form input[type="submit"] {
    background: #111;
    color: #fff;
    border: 0;
    padding: 14px 42px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.partner-portal__form input[type="submit"]:hover {
    background: #333;
}

/* Corporate HQ block sits right of the submit area, as in the mockup */
.partner-portal__hq {
    margin-top: 10px;
    margin-left: 45%;
}

.partner-portal__hq h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

/* Scrolling film strip */
.partner-filmstrip {
    overflow: hidden;
    margin: 40px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 14px 0;
}

.partner-filmstrip__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: partner-filmstrip-scroll 45s linear infinite;
}

.partner-filmstrip__item img {
    height: 56px;
    width: auto;
    -webkit-user-drag: none;
    user-select: none;
}

@keyframes partner-filmstrip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Alternate strips scroll the opposite way (mockup: categories in opposite directions) */
.partner-filmstrip--reverse .partner-filmstrip__track {
    animation-direction: reverse;
}

/* Logos without an image show the partner name as text */
.partner-filmstrip__name {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: #333;
}

/* Strips that sit under a category heading need less breathing room */
.partner-logos__section .partner-filmstrip {
    margin: 18px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .partner-filmstrip__track {
        animation: none;
    }
}

/* Logo bands — formula1.com partners treatment (client reference 2026-07-23):
   near-black to charcoal bands, heading left-aligned in white, logos rendered
   as white silhouettes. */
.partner-logos {
    margin-top: 60px;
    background: #15151e;
}

.partner-logos__heading {
    text-align: left;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    margin: 0;
    padding: 45px 15px 0;
}

/* Bands run edge to edge; the inner .container keeps content on the page grid. */
.partner-logos__section {
    margin: 0;
    padding: 50px 15px;
    text-align: center;
    color: #fff;
}

/* Sibling-counted (not nth-of-type) so the heading's .container div can't
   shift the shades: heading + first band share the same near-black. */
.partner-logos__section {
    background: #15151e;
}

.partner-logos__section + .partner-logos__section {
    background: #26262e;
}

.partner-logos__section + .partner-logos__section + .partner-logos__section {
    background: #45454d;
}

.partner-logos__section .partner-filmstrip__name {
    color: #fff;
}

.partner-logos__section .partner-filmstrip {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Logo chips: logos keep their brand colours on small white tiles. An F1-style
   white-silhouette filter needs transparent monochrome assets; partner uploads
   are usually white-background rasters, which chips keep legible. */
.partner-logos__section .partner-filmstrip__item img {
    background: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    height: 68px;
    box-sizing: border-box;
}

.partner-logos__title {
    font-size: 26px;
    margin-bottom: 26px;
}

.partner-logos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: center;
    justify-items: center;
}

.partner-logos__grid--affiliate {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.partner-logos__item img {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.partner-logos__grid--affiliate .partner-logos__item img {
    max-height: 80px;
}

/* Team grids */
.partner-team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 60px;
    justify-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.partner-team--pilots {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    gap: 40px;
}

.partner-team__member {
    position: relative;
    text-align: center;
}

/* Management layout (mockup p.4): chairman isolated in a left column,
   the rest of the team in a 3-col grid beside him. */
.partner-team--management {
    grid-template-columns: max-content 1fr;
    max-width: 1100px;
    align-items: start;
    gap: 45px 70px;
}

.partner-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 60px;
    justify-items: center;
}

/* Percentage width (capped at the desktop 180px) instead of a fixed
   pixel size: a fixed width forces the grid track wider than a mobile
   column can offer, overflowing horizontally — silently clipped by
   body's global overflow-x: hidden, which is what was cutting off
   titles like "Director of Operations" on phones. */
.partner-team__photo img {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 9 / 11;
    object-fit: cover;
    object-position: top;
}

.partner-team__name {
    display: block;
    margin-top: 12px;
}

.partner-team__title {
    display: block;
    font-size: 14px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Hover bio panel (management team) */
.partner-team__bio {
    display: none;
    position: absolute;
    z-index: 30;
    top: 0;
    left: calc(100% + 16px);
    width: 320px;
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 18px;
    font-size: 14px;
}

.partner-team__member:hover .partner-team__bio,
.partner-team__member:focus-within .partner-team__bio {
    display: block;
}

/* Right-edge cards of the management grid flip their bio panel to the left */
.partner-team__grid .partner-team__member:nth-child(3n) .partner-team__bio {
    left: auto;
    right: calc(100% + 16px);
}

/* Last member alone in its row sits bottom-center, as in the mockup */
.partner-team__member--centered {
    grid-column: 2;
}

/* Pilots grid (4 cols): centers a short last row instead of stacking it left */
.partner-team__member--col-1 { grid-column: 1; }
.partner-team__member--col-2 { grid-column: 2; }
.partner-team__member--col-3 { grid-column: 3; }
.partner-team__member--col-4 { grid-column: 4; }

.partner-team__bio strong {
    display: block;
}

.partner-team__bio > span {
    display: block;
    color: #555;
}

.partner-team__bio p {
    margin-top: 8px;
}

/* Bio content may use rich markup (lists etc.) and extends to full length */
.partner-team__bio ul,
.partner-team__bio ol {
    margin: 8px 0 8px 18px;
    list-style: disc;
}

.partner-team__bio ol {
    list-style: decimal;
}

.partner-team__education {
    color: #555;
    font-style: italic;
    margin-top: 8px;
}

/* News */
.partner-news {
    max-width: 900px;
    margin: 0 auto;
}

.partner-news__item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    margin-bottom: 44px;
    align-items: start;
}

.partner-news__thumb img {
    width: 100%;
    height: auto;
}

.partner-news__title {
    color: #111;
}

.partner-news__excerpt {
    margin: 10px 0 16px;
}

.partner-news__detail {
    max-width: 900px;
    margin: 0 auto;
}

.partner-news__back {
    display: inline-block;
    margin-bottom: 18px;
    color: #333;
    text-decoration: none;
}

.partner-news__back:hover {
    text-decoration: underline;
}

.partner-news__meta {
    color: #777;
    font-size: 14px;
    margin: 6px 0 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    /* minmax(0, 1fr), not plain 1fr: a bare 1fr track can't shrink below
       its content's min-content, so any fixed-width child (or long
       unbreakable title) forces the grid wider than the viewport. */
    .partner-team,
    .partner-team--pilots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Stack the chairman above the team grid */
    .partner-team--management {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .partner-logos__grid--affiliate {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Column count changed, so the 4-col centering math no longer applies */
    .partner-team__member--col-1,
    .partner-team__member--col-2,
    .partner-team__member--col-3,
    .partner-team__member--col-4 {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    /* .container never gets horizontal padding below its own 576px
       breakpoint, so without this the heading, subnav, contact cards and
       every form field run flush edge-to-edge on phones. */
    .partner-portal {
        padding-left: 20px;
        padding-right: 20px;
    }

    .partner-portal__heading {
        margin-bottom: 24px;
    }

    /* Wrap (not scroll) so every section stays visible without a hidden
       swipe gesture; plain underline instead of pills for a lighter look;
       left-aligned so wrapped rows don't stagger/center independently. */
    .partner-portal__subnav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 8px;
        font-size: 13px;
    }

    .partner-portal__subnav-link {
        padding: 8px;
        border-bottom: 2px solid transparent;
    }

    .partner-portal__subnav-link.is-active {
        border-bottom-color: #111;
    }

    .partner-logos__heading {
        font-size: 24px;
        padding: 30px 15px 0;
    }

    .partner-portal__columns {
        grid-template-columns: 1fr;
    }

    .partner-team,
    .partner-team--pilots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .partner-team--management {
        grid-template-columns: minmax(0, 1fr);
    }

    .partner-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .partner-logos__grid,
    .partner-logos__grid--affiliate {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .partner-news__item {
        grid-template-columns: 1fr;
    }

    /* Cards give the stacked single-column layout depth/hierarchy instead
       of a flat run of plain text once contacts, form and HQ block stack. */
    .partner-contact {
        padding: 16px;
        background: #f7f7f8;
        border-radius: 10px;
    }

    .partner-portal__hq {
        margin-left: 0;
        margin-top: 24px;
        padding: 16px;
        background: #f7f7f8;
        border-radius: 10px;
        border-left: 3px solid #111;
    }

    .partner-team__member--centered {
        grid-column: auto;
    }

    /* Hover panels don't fit beside the card on small screens */
    .partner-team__bio {
        position: static;
        width: auto;
        margin-top: 10px;
        box-shadow: none;
    }

    .partner-team__member .partner-team__bio {
        display: none;
    }

    .partner-team__member.is-open .partner-team__bio {
        display: block;
    }

    .partner-portal__logout {
        position: static;
        margin-top: 8px;
    }

    /* Chips (added above) replace the divider-line nav entirely, so no
       border is left to clear at wrap points. */
    .partner-portal__subnav-link + .partner-portal__subnav-link {
        border-left: 0;
    }
}

@media (max-width: 480px) {
    .partner-team,
    .partner-team--pilots,
    .partner-logos__grid,
    .partner-logos__grid--affiliate {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* This rule's shared .partner-team selector also matches
       .partner-team--management (it carries both classes), so without
       restating the override here it silently wins back to 2 columns
       and un-stacks the chairman from the grid beside him. */
    .partner-team--management {
        grid-template-columns: minmax(0, 1fr);
    }
}