/* ==========================================================================
   Anniversary Collage Hero
   --------------------------------------------------------------------------
   Single-image hero variant for the 20th-anniversary template, used when
   `cpm_anniversary_hero_image_id` page meta is set. Fully independent from
   `.cpm-anniversary-hero` (the circle-orbit variant) — no shared selectors,
   no circle classes referenced anywhere here.
   Reference: Figma 20th Anniversary Rebranding, node 107-58 ("Desktop Fold").
   ========================================================================== */

.cpm-anniversary-collage-hero {
    /* Element measure tokens scoped to this block. Declared here rather
       than as theme tokens because they're one-off Figma values, not part
       of the design system. */
    --collage-logo-max:        720px;
    --collage-subhead-max:     620px;
    --collage-logo-mobile-max: 420px;

    /* 1728 × 1117 hero frame. Image covers edge-to-edge; the green
       (verde principal) bg only shows behind the overlay tint, not around
       the photo. */
    position: relative;
    width: 100%;
    aspect-ratio: 1728 / 1117; /* Figma: frame width × height */
    border: 7px solid #000;    /* Figma: 7px black frame */
    border-radius: 40px;       /* Figma: 40px radius */
    background: #08543C;       /* Figma: verde principal (visible only through overlay) */
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.cpm-anniversary-collage-hero__frame {
    /* Inner frame holds the photo + overlay. With the new outer-section
       padding, this fills the available inner area. */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.cpm-anniversary-collage-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

.cpm-anniversary-collage-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.82);
}

.cpm-anniversary-collage-hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    color: #fff; /* Figma: white wordmark + subhead on overlay */
}

.cpm-anniversary-collage-hero__logo-picture {
    display: block;
    max-width: var(--collage-logo-max);
    width: 60vw;
    margin: 0 auto;
}

.cpm-anniversary-collage-hero__logo {
    width: 100%;
    height: auto;
    display: block;
}

.cpm-anniversary-collage-hero__subheadline {
    margin: 24px 0 0;
    width: 100%;
    max-width: none;
    font-family: var(--font-family-primary);
    font-size: 25px;
    line-height: 35px; /* Figma: 140% */
    color: var(--color-white);
    font-weight: 400;
    text-align: center;
}

.cpm-anniversary-collage-hero__cta {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
}

.cpm-anniversary-collage-hero__cta .cpm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 10px 25px;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid var(--color-white);
    background: transparent;
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-white);
}

.cpm-anniversary-collage-hero__cta .cpm-btn-primary:hover,
.cpm-anniversary-collage-hero__cta .cpm-btn-primary:focus {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.cpm-anniversary-collage-hero__site-mark {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 3;
    color: var(--color-primary-neon); /* Figma: verde neón */
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    text-align: right;
    text-decoration: none;
}

.cpm-anniversary-collage-hero__site-mark:hover {
    color: var(--color-primary-neon);
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — Figma breakpoints (1008px desktop, 778px mobile)
   ========================================================================== */

@media (max-width: 1008px) {
    .cpm-anniversary-collage-hero {
        aspect-ratio: 4 / 5; /* Figma: more portrait on narrower screens */
    }

    .cpm-anniversary-collage-hero__content {
        padding: 0 8%;
    }

    .cpm-anniversary-collage-hero__site-mark {
        right: 40px;
    }
}

@media (max-width: 778px) {
    .cpm-anniversary-collage-hero {
        aspect-ratio: 3 / 4;
    }

    .cpm-anniversary-collage-hero__site-mark {
        display: none;
    }

    .cpm-anniversary-collage-hero__logo-picture {
        width: 80vw;
        max-width: var(--collage-logo-mobile-max);
    }

    .cpm-anniversary-collage-hero__subheadline {
        font-size: 1rem;
        line-height: 1.12;
        margin-top: 18px;
        max-width: 90%;
    }

    .cpm-anniversary-collage-hero__cta {
        bottom: 16px;
        right: 16px;
    }
}