/* ==========================================================================
   creators.css - photo collage for the hero section (partials/hero_photos.php)
   Self-contained: uses the site CSS variables when present, but every var()
   has a fallback, so no changes to style.css are required.
   ========================================================================== */

/* --- Optional two-column hero layout -------------------------------------
   Wrap the existing hero text in .hero-copy, put it together with the
   collage inside .hero-grid (inside .hero > .container). On mobile the
   collage stacks under the text; from 900px it becomes the right column. */

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    align-items: center;
}

.hero-grid > .hero-copy {
    min-width: 0;
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
        gap: 3rem;
    }
}

/* --- Collage container ---------------------------------------------------- */

.hero-photos {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 5 / 6;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .hero-photos {
        max-width: 420px;
    }
}

/* Soft glow behind the collage, in the brand accent colors */
.hero-photos::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 107, 74, 0.34), transparent 60%),
        radial-gradient(circle at 72% 78%, rgba(255, 179, 71, 0.26), transparent 58%);
    filter: blur(42px);
    pointer-events: none;
    z-index: 0;
}

/* --- Collage items --------------------------------------------------------
   Percentage offsets and widths keep the whole composition fluid: it scales
   down proportionally on narrow screens with zero horizontal overflow.
   The 2-5% insets absorb the extra corner span created by the rotations. */

.hero-photos__item {
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius-l, 22px);
    background: var(--bg-elevated, #14141c);
    box-shadow: 0 16px 38px rgba(4, 4, 8, 0.5);
    z-index: 1;
}

.hero-photos__item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.hero-photos__item--top {
    top: 0;
    left: 2%;
    width: 52%;
    aspect-ratio: 3 / 2;
    transform: rotate(-3deg);
}

.hero-photos__item--main {
    top: 6%;
    right: 2%;
    width: 62%;
    aspect-ratio: 2 / 3;
    transform: rotate(2deg);
    border: 3px solid var(--accent, #ff6b4a);
    box-shadow:
        0 20px 44px rgba(4, 4, 8, 0.55),
        0 0 34px rgba(255, 107, 74, 0.18);
    z-index: 2;
}

.hero-photos__item--bottom {
    bottom: 2%;
    left: 5%;
    width: 55%;
    aspect-ratio: 3 / 2;
    transform: rotate(3deg);
    z-index: 3;
}

/* On very narrow screens simplify the collage: keep the two strongest
   photos, let the main one take more width. */
@media (max-width: 420px) {
    .hero-photos {
        max-width: 300px;
        aspect-ratio: 4 / 5;
    }

    .hero-photos__item--top {
        display: none;
    }

    .hero-photos__item--main {
        top: 0;
        right: 4%;
        width: 68%;
    }

    .hero-photos__item--bottom {
        width: 58%;
        left: 2%;
    }
}