/* ==========================================================================
   IV Drips Greece — HOMEPAGE
   Only loaded on the homepage. Filled in section by section.
   ========================================================================== */

/* ==========================================================================
   Hero
   Background = $position4 slideshow — pure CSS crossfade (see cssSlideshow()
   in site_helper.php), no JS library involved. Each slide is a plain <div>
   with its own image + .sliderCaption (the per-slide headline); the static
   eyebrow/description text is injected via ::before/::after so the whole
   block (eyebrow + headline + description) lives inside the slide and fades
   as one unit. Language text comes from body#gr / body#en (see page.php).
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ---- background slideshow ---- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media,
.hero__media .hero__slider {
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
/* headline block lives in the same spot the original static text column
   occupied (bottom-left, over the scrim's opaque side) — dark text, no
   shadow needed, just like before. The whole block (eyebrow + headline +
   description) now lives inside the slide so it fades as one unit. */
.hero__media .sliderCaption {
  /* matches .container's actual content start (padding + the extra
     centering margin .container picks up once the viewport exceeds its
     160rem max-width) — the hero itself is full-bleed with no such cap,
     so a plain fixed left value drifts from the buttons below on wide
     screens */
  position: absolute;
  left: max(2.4rem, calc((100vw - 160rem) / 2 + 2.4rem));
  right: 2.4rem;
  bottom: 20rem;
  max-width: 64rem;
  margin: 0;
}
/* eyebrow / heading / description are real elements (lang('hero-eyebrow'),
   the per-slide CMS title, lang('hero-tagline')) rendered inside each slide
   by cssSlideshow() in site_helper.php — not CSS-generated content — so
   they're translatable/editable from the CMS like everything else */
.hero__media .sliderCaption .hero__eyebrow-text {
  display: block;
  margin: 0 0 1rem;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espresso);
}
.hero__media .sliderCaption .hero__heading {
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.hero__media .sliderCaption .hero__description {
  display: block;
  margin: 2rem 0 0;
  max-width: 48rem;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.8;
}
@media (min-width: 768px) {
  .hero__media .sliderCaption {
    left: max(4.8rem, calc((100vw - 160rem) / 2 + 4.8rem));
    right: auto;
    bottom: 24rem;
    max-width: 64rem;
  }
}
.hero__media .sliderCaption strong {
  font-style: normal;
  color: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    oklch(97.5% 0.018 85 / 0.88),
    oklch(97.5% 0.018 85 / 0.35) 55%,
    transparent
  );
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(97.5% 0.018 85 / 0.75),
    transparent 55%
  );
}

/* ---- decorative blob ---- */
.hero__blob {
  position: absolute;
  top: 28%;
  left: -12.8rem;
  z-index: 1;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  opacity: 0.45;
  filter: blur(7rem);
  animation: heroDrift 10s ease-in-out infinite;
}
@keyframes heroDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(2rem, -1.5rem) scale(1.05);
  }
}

/* ---- powered-by credit ---- */
.hero__powered-by {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 4rem;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.hero__powered-by:hover {
  opacity: 1;
}
.hero__powered-by-logo {
  display: block;
  height: 3.6rem;
  width: auto;
}

/* ---- content ---- */
/* anchored off the SAME bottom reference as .sliderCaption (20rem mobile /
   18rem desktop) rather than a separately-tuned padding-top, so the gap
   below the description is always exactly 4rem — independent of how many
   lines the heading/description wrap to */
.hero__row {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 18rem);
  z-index: 2;
}
@media (min-width: 768px) {
  .hero__row {
    top: calc(100% - 21rem);
  }
}

.hero__content {
  max-width: 64rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
@media (min-width: 768px) {
  .hero__actions {
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .hero__content {
    max-width: 100%;
  }
  .hero__blob {
    width: 26rem;
    height: 26rem;
    left: -9.6rem;
  }
  .hero__powered-by {
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }
  .hero__powered-by-logo {
    height: 2.8rem;
  }
  /* Pull caption slightly higher on small phones so multi-line headings
     don't overlap with the CTA row below */
  .hero__media .sliderCaption {
    bottom: 22rem;
  }
}

/* ==========================================================================
   Philosophy
   Image (position13) on the left, eyebrow + heading (lang) and two
   paragraphs (position12) on the right.
   ========================================================================== */
.philosophy {
  padding: 8rem 0;
}
@media (min-width: 768px) {
  .philosophy {
    padding: 12.8rem 0;
  }
}

.philosophy__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6.4rem;
  align-items: center;
}
@media (min-width: 768px) {
  .philosophy__row {
    grid-template-columns: 5fr 6fr;
    gap: 12rem;
  }
}

.philosophy__image-wrap {
  position: relative;
}
@media (max-width: 767px) {
  .philosophy__image-wrap {
    max-width: 26rem;
    margin: 0 auto;
  }
}
.philosophy__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 62% 38% 54% 46% / 48% 56% 44% 52%;
  box-shadow: var(--shadow-soft);
  animation: philosophyFloat 9s ease-in-out infinite;
}
.philosophy__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes philosophyFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-1.8rem) rotate(3deg);
  }
}
.philosophy__accent {
  position: absolute;
  bottom: -4rem;
  right: -1.6rem;
  width: 16rem;
  height: 16rem;
  border-radius: 38% 62% 46% 54% / 56% 44%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  opacity: 0.4;
  filter: blur(4rem);
}

.philosophy__heading {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.philosophy__heading em,
.philosophy__heading strong {
  font-style: normal;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.philosophy__text {
  margin-top: 5.6rem;
  max-width: 48rem;
}
.philosophy__text p {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.75;
}

.philosophy__content .link-arrow {
  margin-top: 4.8rem;
}

/* ==========================================================================
   Concierge
   Edge-to-edge section (intentionally breaks out of .container). The photo
   sits on the left and fades into the page background well inside its own
   box; the glass card floats over the remaining space on the right —
   heading/eyebrow/CTA via lang(), description (position15) and three
   feature bullets (position16-18).
   ========================================================================== */
.concierge {
  position: relative;
  overflow: hidden;
}
.concierge__media {
  position: relative;
  height: 48rem;
}
.concierge__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.concierge__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ivory) 0%, transparent 35%);
}

.concierge__row {
  position: relative;
  z-index: 1;
  margin-top: -6rem;
  padding: 0 2.4rem;
}
.concierge__card {
  padding: 2.8rem 2.4rem;
  border-radius: 2.5rem;
  box-shadow: var(--shadow-soft);
  background-color: var(--ivory);
}
@media (min-width: 768px) {
  .concierge__card {
    padding: 4rem;
  }
}

.concierge__heading {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.concierge__heading em,
.concierge__heading strong {
  font-style: normal;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.concierge__description {
  max-width: 40rem;
  margin: 3.2rem 0 0;
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.8;
}

.concierge__cta {
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .concierge {
    min-height: 90vh;
  }
  .concierge__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 68%;
    height: 100%;
  }
  .concierge__scrim {
    /* fades the image to the page background well inside its own 68%-wide
       box, so it visually "disappears" before reaching the card area */
    background: linear-gradient(to right, transparent 55%, var(--ivory) 100%);
  }
  .concierge__row {
    min-height: 90vh;
    margin-top: 0;
    padding: 0 4.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .concierge__card {
    width: 100%;
    max-width: 56rem;
    padding: 5.6rem;
  }
}

/* ==========================================================================
   Therapies
   Section intro (position15) + three alternating image/text cards. Each
   card: image (position16-18), category/title/description (lang +
   position19-21) and duration only — price intentionally omitted.
   ========================================================================== */
.therapies {
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  background: linear-gradient(
    to bottom,
    var(--background),
    oklch(92% 0.03 78 / 0.4),
    var(--background)
  );
}
@media (min-width: 768px) {
  .therapies {
    padding: 12.8rem 0;
  }
}
.therapies__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(6rem);
  pointer-events: none;
}
.therapies__blob--1 {
  top: 8rem;
  right: -10rem;
  width: 50rem;
  height: 50rem;
  background: linear-gradient(135deg, oklch(88% 0.09 85 / 0.3), transparent);
}
.therapies__blob--2 {
  bottom: 16rem;
  left: -6rem;
  width: 36rem;
  height: 36rem;
  background: linear-gradient(135deg, oklch(72% 0.13 75 / 0.2), transparent);
}

.therapies__head {
  position: relative;
  z-index: 1;
  margin-bottom: 9.6rem;
}
.therapies__heading {
  max-width: 59rem;
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.therapies__heading strong,
.therapies__heading em {
  font-style: normal;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.therapies__more {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 9.6rem;
}
@media (min-width: 768px) {
  .therapies__more {
    margin-top: 12.8rem;
  }
}

/* ==========================================================================
   Journal
   One large featured article + two smaller list items. Demo content only
   for now — not wired to the CMS articles system yet.
   ========================================================================== */
.journal {
  padding: 8rem 0;
}
@media (min-width: 768px) {
  .journal {
    padding: 12.8rem 0;
  }
}

.journal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 8rem;
}
.journal__heading {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.journal__heading strong,
.journal__heading em {
  font-style: normal;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* journal-article is loop-rendered (newsmodules/module2.php via the
   {{news::latest::3::...}} module on position16) — there's no per-item
   loop-index available to the template, so which article looks "featured"
   vs "small" is driven entirely by DOM position (nth-child), same approach
   as the therapy cards. Capped at 3 visible cards as a safety net in case
   more than 3 rows ever match. */
.journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8rem;
  align-items: flex-start;
}
.journal-article:nth-child(n + 4) {
  display: none;
}
@media (min-width: 768px) {
  .journal__grid {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: 1fr 1fr;
    gap: 6.4rem;
  }
  .journal-article:nth-child(1) {
    /* spans both rows; the two small articles split that height evenly
       (grid-template-rows: 1fr 1fr) and are vertically centered in their
       half, so article 3's bottom edge lines up with article 1's */
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .journal-article:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .journal-article:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .journal-article:nth-child(1) .journal-article__excerpt {
    max-width: none;
  }
}

.journal-article__media {
  display: block;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: 0.4rem;
}
.journal-article__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s ease;
}
.journal-article:hover .journal-article__media img {
  transform: scale(1.05);
}
.journal-article__title {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  line-height: 1.2;
  color: var(--espresso);
}
.journal-article__title a {
  transition: color 0.3s ease;
}
.journal-article__title a:hover {
  color: var(--gold-deep);
}
.journal-article__excerpt {
  max-width: 56rem;
  margin: 2rem 0 0;
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.7;
}
.journal-article__link {
  display: inline-block;
  margin-top: 1.6rem;
  padding-bottom: 0.4rem;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: var(--espresso);
  border-bottom: 1px solid var(--gold);
  transition: color 0.3s ease;
}
.journal-article__link:hover {
  color: var(--gold-deep);
}

/* small (non-featured) treatment, desktop only */
@media (min-width: 768px) {
  .journal__grid > .journal-article + .journal-article {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 2.4rem;
    align-items: center;
  }
  .journal__grid > .journal-article + .journal-article .journal-article__media {
    aspect-ratio: 4 / 5;
  }
  .journal__grid > .journal-article + .journal-article .journal-article__title {
    margin-top: 0;
    font-size: 2rem;
  }
}

/* ==========================================================================
   How It Works
   Hardcoded content (no lang()/CMS positions) per explicit request. A
   horizontal 3-step timeline on desktop (vertical stack on mobile) that
   reveals step by step on scroll via a single IntersectionObserver toggling
   .is-visible on the timeline — each step's CSS transition-delay (driven by
   the inline --step-index custom property) staggers the actual reveal.
   ========================================================================== */
.how-it-works {
  position: relative;
  padding: 8rem 0;
  background-color: var(--sand);
}
@media (min-width: 768px) {
  .how-it-works {
    padding: 12.8rem 0;
  }
}

.how-it-works__head {
  max-width: 60rem;
  margin: 0 auto 6.4rem;
  text-align: center;
}
@media (min-width: 768px) {
  .how-it-works__head {
    margin-bottom: 9.6rem;
  }
}
.how-it-works__heading {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem);
  line-height: 1.1;
  color: var(--espresso);
}
.how-it-works__heading strong {
  font-style: normal;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.how-it-works__timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6.4rem;
}
@media (min-width: 768px) {
  .how-it-works__timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
  }
}

.how-it-works__line {
  display: none;
}
@media (min-width: 768px) {
  .how-it-works__line {
    display: block;
    position: absolute;
    top: 2.8rem;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--gold),
      var(--gold),
      transparent
    );
  }
}

.how-it-works__step {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(3.2rem) scale(0.94);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: calc(var(--step-index) * 0.2s);
}
.how-it-works__timeline.is-visible .how-it-works__step {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.how-it-works__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: oklch(99% 0.005 85);
  font-family: var(--font-kreadon);
  font-weight: 700;
  font-size: 2rem;
  box-shadow: var(--shadow-soft);
}

.how-it-works__title {
  margin: 2.4rem 0 0;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--espresso);
}

.how-it-works__description {
  max-width: 32rem;
  margin: 1.6rem auto 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.75;
}