/* =========================================================
   CustomizedSports - Brand page redesign (lyst/hvidt layout)
   Bruges kun af taxonomy-product_brand-craft.php.

   Alle klasser er navngivet under cs-brandpage-* for bevidst
   IKKE at genbruge/kollidere med de mørke .cs-hero / .cs-card /
   .cs-category-card stilarter i cs-sport.css, så den gamle
   brand-visning (taxonomy-product_brand.php) forbliver upåvirket.
   Filen enqueues efter cs-sport.css, så den vinder ved lige
   specificitet på tværs af de globale :where()-regler dér.
========================================================= */

.cs-brandpage {
    --cs-brandpage-ink: #14181c;
    --cs-brandpage-muted: #5b6470;
    --cs-brandpage-line: #e6e6e3;
    --cs-brandpage-accent: #ff6a00;
    --cs-brandpage-bar: #14181c;
}

/* Hero
========================================================= */

.cs-brandpage-hero {
    position: relative;
    overflow: visible;
    background-image: var(--cs-brandpage-hero-bg, none), linear-gradient(135deg, #171d21 0%, #0d1117 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-color: #0d1117;
}

.cs-brandpage-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 11, 13, 0.72) 0%, rgba(8, 11, 13, 0.4) 48%, rgba(8, 11, 13, 0.12) 78%);
    pointer-events: none;
}

.cs-brandpage-hero__inner {
    /* Delt indryk-værdi til hero__panel's top/right, så afstanden til
       toppen og til højre kant af hero'en altid er ens. */
    --cs-brandpage-hero-inset: clamp(20px, 3vw, 40px);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: clamp(300px, 36vw, 440px);
    padding-block: clamp(48px, 6vw, 72px) clamp(96px, 9vw, 128px);
}

.cs-brandpage-hero__badge {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: clamp(-88px, -8vw, -56px);
    width: clamp(112px, 10vw, 168px);
    height: clamp(112px, 10vw, 168px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.cs-brandpage-hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cs-brandpage-hero__panel {
    /* Lagt oven på billedet som et "kort" i øverste højre hjørne,
       med samme indryk (--cs-brandpage-hero-inset) til top og højre
       kant, i stedet for at følge med i midten af hero'en. Positioneres
       ift. .cs-brandpage-hero__inner (som er position:relative), altså
       samme indryk fra kanten af den centrerede 1180px-container som
       badge'en bruger. */
    position: absolute;
    top: var(--cs-brandpage-hero-inset);
    right: var(--cs-brandpage-hero-inset);
    width: 100%;
    max-width: 480px;
    padding: clamp(26px, 3vw, 40px) clamp(26px, 3.2vw, 44px);
    border-radius: 18px;
    /* Hvid boks der toner ud i toppen af billedet i stedet for
       en solid plade, så folk på hero-billedet bag boksen stadig
       kan anes i bunden af panelet (i stedet for at blive dækket
       helt af hvid baggrund). ~65% er solid (til tekst-kontrast),
       resten toner til gennemsigtig. */
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
}

.cs-brandpage-hero__title {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--cs-brandpage-ink);
    text-transform: none;
}

.cs-brandpage-hero__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-brandpage-muted);
}

@media (max-width: 899px) {
    .cs-brandpage-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding-block: 44px 72px;
    }

    .cs-brandpage-hero__badge {
        position: static;
        margin-bottom: -40px;
    }

    .cs-brandpage-hero__panel {
        position: static;
        margin-left: 0;
        max-width: none;
    }
}

/* Infobar
========================================================= */

.cs-brandpage-infobar {
    background: var(--cs-brandpage-bar);
}

.cs-brandpage-infobar__inner {
    padding-block: 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    color: #f5f5f4;
}

/* 2026-09-15: valgfrit link ud til klubbens EGEN hjemmeside
   (brand_cta_text/brand_cta_link), bevidst mere afdæmpet end
   infobaren ovenfor - det er en sekundær ting, ikke en CTA der
   skal konkurrere med produktgrid'et. */
.cs-brandpage-website {
    background: #fff;
    margin-top: 1px !important; /* adskiller fra infobar */
}

.cs-brandpage-website__inner {
    padding-block: 10px;
    text-align: center;
}

.cs-brandpage-website__inner a {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-brandpage-muted, #6b6b6b);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cs-brandpage-website__inner a:hover {
    color: var(--cs-brandpage-ink, #6b6b6b);
}

/* Produktgrid
========================================================= */

.cs-brandpage-products {
    background: #fff;
    padding-block: clamp(48px, 6vw, 88px);
}

.cs-brandpage-products__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 3.4vw, 40px) clamp(16px, 2vw, 28px);
}

@media (min-width: 600px) {
    .cs-brandpage-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cs-brandpage-products__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cs-brandpage-product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.cs-brandpage-product__image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f4;
    border-radius: 4px;
}

.cs-brandpage-product__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 300ms ease;
}

.cs-brandpage-product:hover .cs-brandpage-product__image img {
    transform: scale(1.03);
}

.cs-brandpage-product__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cs-brandpage-ink);
}

.cs-brandpage-product__price {
    font-size: 14px;
    color: var(--cs-brandpage-muted);
}

.cs-brandpage-product__price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--cs-brandpage-ink);
}

.cs-brandpage-product__price del {
    color: #9aa1a9;
}

.cs-brandpage-products__empty {
    padding-block: 40px;
    color: var(--cs-brandpage-muted);
    text-align: center;
}