/* Shared rotating banners (JS/banner-carousel.js): the Commercial Partners
   and For Sale banners, on the home page and the Tables page. */

.pc-banner {
    position: relative;
}

/* The banner's place in Key Stats, between the season progress and the
   tables. Its heading matches the Key Stats blocks'. */
.sp-partners {
    margin-bottom: 16px;
}

/* Heading row: "Commercial Partners" and an "Ad" tag, so it's clear the
   banner is paid advertising (ASA CAP Code rule 2.1; see "Why the banner
   has an AD tag" in docs/site-content.md before removing it). The tag's text is
   "Ad", uppercased here, so screen readers say the word rather than
   spelling it out. */
.sp-partners-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
}

.sp-partners-head h3 {
    margin: 0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d4a017;
}

.pc-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #a0a0a0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The For Sale banner, at the bottom of Key Stats under the last row. */
.sp-sales {
    margin-top: 16px;
}

/* On its own when Key Stats has nothing to show (#partnersFallback,
   #salesFallback), and on the Tables page. */
.section--partners .sp-partners,
.section--partners .sp-sales {
    margin: 0;
}

/* Every slide sits in the same grid cell, so the banner is as tall as the
   tallest slide and doesn't jump as it cycles. */
.pc-slides {
    display: grid;
    border-radius: 14px;
    border: 1px solid rgba(212, 160, 23, 0.35);
    background: linear-gradient(120deg, rgba(196, 30, 58, 0.18), rgba(212, 160, 23, 0.08) 60%, rgba(32, 32, 36, 0.9));
    overflow: hidden;
}

.pc-slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.pc-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}

.pc-logo {
    width: 104px;
    height: 104px;
    border-radius: 14px;
    padding: 3px;
    background: linear-gradient(135deg, #c41e3a, #d4a017);
    flex-shrink: 0;
}

/* Logo border turned off for this partner. Two classes, so it also beats
   the phone-size .pc-logo rule. */
.pc-logo.pc-logo-plain {
    padding: 0;
    background: none;
}

/* Rounded corners turned off for this partner: square frame and logo.
   Specific enough to beat .pc-logo img / .pc-initials below and their
   phone-size versions. */
.pc-logo.pc-logo-square,
.pc-logo.pc-logo-square img,
.pc-logo.pc-logo-square .pc-initials {
    border-radius: 0;
}

/* White background turned off for this partner: transparent parts of the
   logo show the banner behind. With the border still on, the inside of
   the frame is the site's dark background, so the frame's gradient
   doesn't show through. */
.pc-logo.pc-logo-clear img {
    background: transparent;
}

.pc-logo.pc-logo-clear:not(.pc-logo-plain) img {
    background: #1f1f24;
}

.pc-logo img,
.pc-initials {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    display: block;
}

.pc-logo img {
    object-fit: contain;
    background: #ffffff;
}

.pc-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f1f24;
    color: #e0d6c8;
    font-size: 2rem;
    font-weight: 700;
}

.pc-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The small gold label above the title: a partner's business name, or a
   sale item's category. */
.pc-eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4a017;
}

/* The headline: a partner's services (or their name, if no services are
   given), or a sale item's name. */
.pc-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    overflow-wrap: anywhere;
}

/* For Sale photos fill their square rather than fitting inside it like
   a logo. */
.pc-photo img {
    object-fit: cover;
}

.pc-price {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.pc-location {
    font-size: 0.88rem;
    color: #a0a0a0;
}

.pc-description {
    margin: 4px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #d0d0d0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-button {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 8px;
    background: linear-gradient(90deg, #c41e3a, #d4a017);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    transition: box-shadow 0.2s ease;
}

/* No transform or filter on hover: either would make the button the
   containing block for ::after below, shrinking the click area back to
   the button. */
.pc-slide:hover .pc-button,
.pc-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 8px 24px rgba(196, 30, 58, 0.35);
}

/* Stretch the link over the whole slide so anywhere on the banner opens
   the partner. Inactive slides are hidden and inert, so only the showing
   partner's link can be clicked. */
.pc-button::after {
    content: '';
    position: absolute;
    inset: 0;
}

.pc-slide:has(.pc-button) {
    cursor: pointer;
}

.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.pc-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The active dot stretches into a bar that fills up until the next slide. */
.pc-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    transition: width 0.3s ease;
}

.pc-dot.is-active {
    width: 34px;
    background: rgba(212, 160, 23, 0.35);
}

.pc-dot.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #d4a017;
    transform-origin: left;
}

.pc-rotating .pc-dot.is-active::after {
    animation: pc-progress var(--pc-interval, 7000ms) linear forwards;
}

@keyframes pc-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.pc-all {
    color: #e07a3f;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
}

.pc-all:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    /* A slim one-row banner on phones: logo, then name, services and
       location (or category, name and price). No description and no
       visible button: the whole banner is the link. */
    .pc-slide {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 12px 14px;
    }

    .pc-logo {
        width: 56px;
        height: 56px;
        border-radius: 10px;
        padding: 2px;
    }

    .pc-logo img,
    .pc-initials {
        border-radius: 8px;
    }

    .pc-initials {
        font-size: 1.15rem;
    }

    .pc-body {
        gap: 1px;
    }

    .pc-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.06em;
    }

    .pc-title {
        font-size: 1.02rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pc-eyebrow,
    .pc-location {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pc-location {
        font-size: 0.78rem;
    }

    .pc-description {
        display: none;
    }

    .pc-price {
        font-size: 0.85rem;
    }

    /* The link becomes an invisible layer over the whole slide. */
    .pc-button {
        position: absolute;
        inset: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        text-shadow: none;
    }

    .pc-slide:hover .pc-button {
        box-shadow: none;
    }

    .pc-button:focus-visible {
        box-shadow: inset 0 0 0 2px #d4a017;
    }

    .pc-button-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .pc-foot {
        margin-top: 10px;
    }

    .pc-dots {
        flex-wrap: nowrap;
    }
}

@media (max-width: 400px) {
    .pc-foot {
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-slide,
    .pc-slide.is-active,
    .pc-dot {
        transition: none;
        transform: none;
    }

    .pc-rotating .pc-dot.is-active::after {
        animation: none;
    }
}