/* Viva Aesthetics — HRT Page CSS (one-click plugin) */

/* Exact fonts (optional): replace URLs with your licensed files to override fallbacks */
@font-face {
  font-family: 'Parfumerie Script';
  src: url('/wp-content/uploads/fonts/parfumerie-script.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/parfumerie-script.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Le Jour Serif';
  src: url('/wp-content/uploads/fonts/le-jour-serif.woff2') format('woff2'),
       url('/wp-content/uploads/fonts/le-jour-serif.woff') format('woff');
  font-display: swap;
}

:root{
  --viva-teal:#146b62;
  --viva-teal-500:#0b7a6e;
  --viva-soft:#e6f3f1;
  --viva-dark:#0B5B52;
  --radius-xl:24px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow-md:0 10px 30px rgba(0,0,0,.08);
  --shadow-sm:0 6px 18px rgba(0,0,0,.06);
}

/* Buttons row */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;margin-bottom:48px}

/* Hero */
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:start}
.hero h1{color:var(--viva-dark);font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 12px}
.hero .hero-intro{color:var(--viva-dark);font-size:clamp(16px,2.2vw,18px);margin:0 0 22px}

/* Side panel */
.side-panel h3{margin:0 0 10px;font-size:clamp(18px,2.5vw,26px);color:var(--viva-teal-500)}
.placeholder-photo{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);min-height:320px;
  background:radial-gradient(1200px 500px at 40% -20%, #fef9c3 0%, rgba(254,249,195,0.6) 30%, rgba(255,255,255,0) 60%),
             linear-gradient(180deg, var(--viva-soft), #fff)}
.placeholder-photo::after{content:'';position:absolute;inset:0;background:
  radial-gradient(600px 300px at 80% 0%, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%)}
.placeholder-caption{position:absolute;bottom:14px;left:16px;font-weight:600;color:#0f172a;background:rgba(255,255,255,.75);
  padding:6px 10px;border-radius:999px;font-size:12px}

/* Info section */
.info{padding:8px 0 12px}
.info h2{font-size:clamp(22px,3vw,34px);margin:0 0 8px;color:var(--viva-dark)}
.info p{margin:0 0 20px;color:var(--viva-dark)}
.info ul{margin:8px 0 0 18px;line-height:1.6;color:var(--viva-dark)}
.info li{color:var(--viva-dark)}

/* Hormone strip */
.hormone-strip{padding:24px 0}
.hormone-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hormone-row img{width:100%;height:100%;display:block;border-radius:14px;box-shadow:var(--shadow-sm);object-fit:cover}

/* Bottom grid */
.bottom{padding:18px 0 44px}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.panel{background:#fff;border-radius:16px;padding:12px;box-shadow:var(--shadow-sm);display:flex;justify-content:center}
.panel img.steps-img{width:100%;max-width:520px;height:auto;display:block;border-radius:12px}

/* Words stack */
.words-stack{width:min(520px,100%);margin:0 auto;text-align:center}
.words-stack .line-plan{
  font-family:'Parfumerie Script','Great Vibes',cursive;
  font-size:62.6px;line-height:1;margin:0 0 4px
}
.words-stack .line-around{
  font-family:'Le Jour Serif','Playfair Display',serif;
  font-size:57.8px;line-height:1;margin:0
}
.words-stack .line-you{
  font-family:'Parfumerie Script','Great Vibes',cursive;
  font-size:62.6px;line-height:1;margin:6px 0 0;text-align:left;margin-left:60%
}

/* Responsive */
@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr}
  .hormone-row{grid-template-columns:repeat(2,1fr)}
  .bottom-grid{grid-template-columns:1fr}
  .words-stack .line-you{margin-left:50%}
}