/* ════════════════════════════════════════════════════════
   HOMEPAGE — EXTRA CSS (loaded after base.css on / only)
   File: assets/css/home.css
   Sources: mrgentleman.gr css/about.css (BOOKING CTA, .detail-tag),
            css/style.css (cards). Corner accents moved from inline styles to classes.
════════════════════════════════════════════════════════ */

/* ── Hero: H1 → gradient H2 spacing (kept identical after the subtitle moved under the photo) ── */
.hero .hero-text > .eyebrow-wrap { margin-top: 3rem; }  /* ← moves eyebrow + H1 down … */
.hero h1 { margin-bottom: 3.85rem; }                   /* … by the same amount the H1→H2 gap shrinks (H2 + text stay in place) */
.hero h2.hero-h2 {
    font-size: clamp(2.1rem, 3.4vw, 3rem);             /* ← HERO H2 SIZE */
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* Hero bottom spacing + caption under the portrait */
.hero { padding-bottom: 7rem; }
#for-women { padding-top: 8rem; }                       /* ← SPACE UNDER THE HERO DIVIDER */
.hero-media { margin: 0; justify-self: center; width: 100%; max-width: 520px; }
.hero-caption { text-align: center; margin-top: 2.6rem; }   /* ← SPACE BETWEEN PHOTO AND CAPTION */
.hero-caption .gold-text { font-size: clamp(1.7rem, 2.4vw, 2.2rem); text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.hero-caption--mobile { display: none; }
.hero .btn { margin-top: 1.6rem; }                     /* hero button keeps its spacing */               /* phones only: caption above the button */

/* Sections where the H3 was removed: same distance from H2 to the text as before */
h2.title-spaced { margin-bottom: 2rem; }               /* ← GAP BETWEEN SECTION TITLE AND TEXT */

/* ── Section intro (centered heading + text) ── */
.section-intro { max-width: 820px; margin: 0 auto; }

/* ── Why Choose Me list (replaces the WP emoji list) ── */
.why-list { list-style: none; margin: 1.2rem 0 1.6rem; }
.why-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 1.12rem; line-height: 1.6; color: var(--text-muted);
}
.why-list li:last-child { border-bottom: none; }
.why-list li::before {
    content: '\2726';                                   /* ✦ gold star, same as the ornament */
    position: absolute; left: 0; top: 0.6rem;
    color: var(--gold); font-size: 0.9rem;
}
.why-list strong { color: var(--gold-light); font-weight: 500; }
.why-list strong::after { content: ':'; color: var(--gold-dim); font-weight: 400; }

/* ── Service cards as links ── */
a.card--link { text-decoration: none; color: inherit; }
.card--link .gold-title { font-size: 1.55rem; }
.card--link p { font-size: 1.08rem; }
.card-more {
    margin-top: 1.4rem;
    font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gold-dim); transition: color var(--transition);
    position: relative; z-index: 1;
}
.card--link:hover .card-more { color: var(--gold-light); }

/* ── Explore My Services: 4 cards (4 in a row → 2 × 2 → 1 column). Card style shared with
      the option cards on /services/ (.lux-card in base.css) ── */
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 3.4rem auto 0; }
.explore-card { padding: 2.6rem 1.8rem 2.3rem; gap: 0.4rem; text-decoration: none; color: inherit; }
.explore-card__title { font-family: var(--font-script); font-weight: 400; font-size: clamp(2rem, 2.4vw, 2.4rem); color: var(--gold-light); line-height: 1.15; margin: 0.2rem 0 0; text-shadow: 0 0 2px rgba(0,0,0,0.5); position: relative; z-index: 2; }
.explore-card__hint { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.6rem; position: relative; z-index: 2; }
.explore-card p { margin: 0; font-size: 1.08rem; position: relative; z-index: 2; }
.explore-card .card-more { margin-top: auto; padding-top: 1.4rem; }
.explore-card:hover .card-more, .explore-card.is-lit .card-more { color: var(--gold-light); }
@media (max-width: 1200px) { .explore-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; gap: 28px; } }
@media (max-width: 640px)  { .explore-grid { grid-template-columns: 1fr; max-width: 480px; gap: 30px; } }


@media (max-width: 1080px) {
}
@media (max-width: 968px) {
    .hero .hero-text > .eyebrow-wrap { margin-top: 2rem; }
    .hero h1 { margin-bottom: 3.85rem; }
    .hero-caption { margin-top: 2rem; }
    .hero-caption .gold-text { font-size: 1.5rem; }
    /* Phones: H1 → portrait → eyebrow → white-blue title → text → caption → button */
    .hero .split { gap: 0; }
    .hero .hero-text { display: contents; }
    .hero .hero-text > h1             { order: 1; margin: 0 0 2.2rem; }
    .hero .split .hero-media          { order: 2; max-width: 380px; margin: 0 auto 3rem; }
    .hero .hero-text > .eyebrow-wrap  { order: 3; margin: 0 0 0.9rem; }
    .hero .hero-text > h2.hero-h2     { order: 4; }
    .hero .hero-text > p              { order: 5; }
    .hero .hero-text > .hero-caption--mobile { order: 6; }
    .hero .hero-text > .btn           { order: 7; }
    .hero .split .hero-media .hero-caption { display: none; }
    .hero-caption--mobile { display: block; margin: 3rem 0 2rem; }   /* ← SPACE ABOVE / BELOW THE CAPTION */
    .hero { padding-bottom: 4rem; }
    #for-women { padding-top: 5.5rem; }
}


/* ── Moving banner under the hero (round 39, try-out) ── */
.marquee {
    position: relative; z-index: 1; overflow: hidden; padding: 1.5rem 0;
    margin-top: -20px;                                  /* round 41: covers the hero's divider glow, so the top colour = bottom colour */
    background: linear-gradient(180deg, rgba(36,44,62,1) 0%, rgba(20,26,38,1) 50%, rgba(36,44,62,1) 100%);   /* lighter at top and bottom */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.55) 20%, #f3dc9a 50%, rgba(201,168,76,0.55) 80%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.marquee__item { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); color: rgba(240,237,232,0.88); letter-spacing: 0.03em; }
.marquee__item--script { font-family: var(--font-script); font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--gold-light); letter-spacing: 0; text-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 14px rgba(201,168,76,0.25); }
.marquee__item::after { content: '\25C7'; font-family: var(--font-serif); font-size: 0.7rem; color: var(--gold); margin: 0 2.2rem; opacity: 0.85; }
@media (min-width: 969px) { .marquee + .section-pad { padding-top: 17rem; } }     /* more space between the banner and the next section (round 41) */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .marquee { padding: 1.1rem 0; } .marquee__item::after { margin: 0 1.4rem; } .marquee__track { animation-duration: 45s; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* banner words are links (round 43) */
.marquee__item a { color: inherit; text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; }
.marquee__item a:hover, .marquee__item a:focus-visible { color: #f6e3ae; text-shadow: 0 0 14px rgba(228,201,123,0.55); }