/* ======================================================================
   Home hero — the neon band above the carousels.

   The section carries .motif-field, so position, isolation, overflow and the
   motif tile all come from main.css and nothing is repeated here. That leaves
   ::after free for the light: three blurred radial washes in the three palette
   accents, which is the whole of the club look. It sits at z-index -2 so the
   motif's own ::before (-1) still reads on top of it, and the section itself
   paints no background, so -2 is still above the page behind it.

   No colour is written here that the palette does not already own: every wash
   is a color-mix() of a knob toward transparent, so re-skinning the site
   re-lights the hero with nothing to keep in step.
   ====================================================================== */
.home-hero {
    padding: clamp(48px, 9vw, 110px) 0 clamp(44px, 7vw, 90px);
    text-align: center;
    /* A lit horizon under the band, so the hero ends on a line of neon rather
       than on the point where the glow happens to run out. */
    border-bottom: 1px solid var(--border-accent);
}

.home-hero::after {
    content: "";
    position: absolute;
    /* Overscanned past every edge: the blur below feathers the layer inward,
       and inset: 0 would leave that soft edge visible against the clip. */
    inset: -90px;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(45% 55% at 18% 6%, color-mix(in srgb, var(--clr-main) 48%, transparent), transparent 70%),
        radial-gradient(42% 52% at 82% 18%, color-mix(in srgb, var(--bg-secondary) 55%, transparent), transparent 70%),
        radial-gradient(60% 40% at 50% 104%, color-mix(in srgb, var(--clr-gold) 26%, transparent), transparent 72%);
    filter: blur(38px);
}

.home-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* The brand name sits above the headline as a small label rather than as a
   second heading: the page already has one <h1>, and this line is there to say
   whose site this is, not what the page is about.

   It is the same Latin brand name as the header wordmark, so it takes the same
   face — --font-logo, the theme's one exception to --font-family — and reads as
   a signature over the headline rather than as a second, unrelated label.

   That face is what sets the other three numbers here, and none of them is
   loose. It ships one weight, so the weight comes from --font-logo-weight for
   the reason .logo-name's does: asking a display family for a 700 it does not
   have gets a synthesised bold, which on a script reads as a rendering fault.
   It is a script, so the line is NOT uppercased and the tracking drops to 0.06em
   — a script's character is in its lowercase, and set in caps at a kicker's
   0.22em its thick/thin contrast flattens into a faint generic line. And it runs
   optically small with a low x-height, so the size floor lifts to 17px to hold
   the same presence a 12px grotesque had. Set it back in the site font and all
   three want their old values again. */
.home-hero-eyebrow {
    margin: 0;
    font-family: var(--font-logo);
    font-size: clamp(17px, 2.2vw, 22px);
    font-weight: var(--font-logo-weight);
    letter-spacing: 0.06em;
    color: var(--clr-engagement);
}

/* .metal-text paints the sweep into the glyphs, so this rule owns size and
   weight only. The glow is a drop-shadow rather than a text-shadow for the same
   reason the logo's is: a text-shadow would paint over the clipped gradient.

   background-size is the same widening .logo-name applies, and here it is
   load-bearing rather than a nicety: the sweep is tilted 100deg, so on a block
   two lines tall the second line sits further along the gradient axis than the
   first and lands on the deep outer stop. Doubling the sweep's width pushes
   both outer stops off the element, leaving every line on the lit part of it. */
.home-hero-title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(34px, 6.4vw, 74px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    background-size: 200% 200%;
    background-position: center;
    /* main.css gives every h1 a dark text-shadow. On a .metal-text element that
       shadow is painted over the gradient the glyphs are clipping, which reads
       as a muddy heading rather than as lit metal — the same reason .logo-name
       carries its glow as a filter. It has to be cleared, not overridden. */
    text-shadow: none;
    filter: drop-shadow(0 0 26px var(--clr-main-soft));
}

.home-hero-lead {
    margin: 0;
    /* A measure, not a width: the lead is the one paragraph on the page a
       visitor actually reads, and a full-width line at this size is unreadable. */
    max-width: 56ch;
    font-size: clamp(15px, 2vw, 19px);
    line-height: 1.65;
    color: var(--clr-text-muted);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

/* Bigger than a .btn in the page body, because these two are the only thing in
   the hero a visitor can press. */
.home-hero-cta {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    padding: 13px 32px;
    box-shadow: 0 0 calc(26px * var(--shadow-strength)) var(--clr-main-soft);
}

/* The second action is the same shape with the fill taken out, so the pair
   reads as one primary and one alternative rather than as two equal buttons.
   background-color, not the background shorthand: the longhand cannot reset an
   image the .btn rule may one day paint. */
.home-hero-cta-ghost {
    background-color: transparent;
    color: var(--clr-main);
    box-shadow: none;
}

.home-hero-cta-ghost:hover {
    /* .btn:hover darkens with brightness(), which does nothing to a transparent
       fill — so this variant lights up instead of dimming. */
    filter: none;
    background-color: var(--accent-soft);
    border-color: var(--bg-secondary);
    color: var(--clr-text);
}

/* The figures are counted in page_home.php and a zero is dropped there, so this
   list never has to style an empty or absent stat. */
.home-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(18px, 5vw, 56px);
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.home-hero-stat-value {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 900;
    line-height: 1;
    color: var(--clr-main);
    text-shadow: 0 0 calc(18px * var(--shadow-strength)) var(--clr-main-soft);
}

.home-hero-stat-label {
    font-size: clamp(11px, 1.5vw, 14px);
    letter-spacing: 0.08em;
    color: var(--clr-engagement);
}

.home-packages {
    margin-bottom: 40px;
}

.home-intro {
    color: var(--clr-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-cta {
        transition: none;
    }
}

/* ======================================================================
   Show packages — the band under the carousels.

   Four fixed offers from ThemeConfig::PACKAGES, so this is a short list of
   equals, not a feed: a plain flex row of outlined cards rather than the
   .grid the dancer cards use, which is sized for photographs and would leave
   these looking like ads with the picture missing.

   The cards take the same outlined-that-fills treatment as the subcategory
   pills, for the same reason — a row of saturated slabs under a heading reads
   as the subject of the page rather than as things to press.
   ====================================================================== */
.packages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

/* flex-basis over a column count: the number of packages is a setting, so a
   fixed track count would strand a fifth one on a row of its own. This fits as
   many per row as the width allows and keeps them equal. */
.package-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 240px;
    max-width: 340px;
    padding: 26px 22px;
    text-align: center;
    background-color: var(--surface-translucent);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.package-card:hover {
    border-color: var(--clr-main);
    box-shadow: 0 0 calc(26px * var(--shadow-strength)) var(--clr-main-soft);
    transform: translateY(-4px);
}

.package-icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--clr-main);
    filter: drop-shadow(0 0 12px var(--clr-main-soft));
}

.package-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--clr-text);
}

.package-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--clr-text-muted);
}

/* Pinned to the bottom so the buttons line up across cards whose text runs to
   a different number of lines. */
.package-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-main);
    text-decoration: none;
}

.package-cta:hover {
    color: var(--clr-text);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .package-card {
        transition: none;
    }

    .package-card:hover {
        transform: none;
    }
}