/* =========================================================================
   Miami Wellness Review — front-end stylesheet
   Ported from the homepage mockup (miami-wellness-review-final.html).
   Default peach palette + Fraunces display (titles), Figtree body. The mockup's preview
   bar, alternate themes, and alternate display fonts are intentionally not
   shipped — this is the chosen brand look.
   ========================================================================= */

:root{
  --display:"Fraunces";
  --bg:#F4F0EA; --ink:#1C1712; --muted:#867B6E;
  --grad:linear-gradient(135deg,#FF9E6D 0%,#FF6F91 52%,#F2B5A0 100%);
  --accent:#FF6F86; --g1:rgba(255,158,109,.36); --g2:rgba(255,111,145,.30);
  --glass:rgba(255,255,255,.54); --glassb:rgba(255,255,255,.64); --line:rgba(28,23,18,.12);
}

/* ---- Base ---------------------------------------------------------------- */
body{
  background:var(--bg); color:var(--ink); font-family:"Figtree",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(56% 46% at 84% 2%, var(--g1), transparent 66%),
             radial-gradient(52% 42% at 6% 56%, var(--g2), transparent 70%);
}
.wp-site-blocks{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

.display,h1,h2,h3,h4{font-family:var(--display),Georgia,serif}
.gradtext{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.mwr-topnav .mwr-brand a,.mwr-footer .mwr-brand a{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.kick{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; display:inline-block}
.time{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}

/* Centered wrapper used by the homepage and the simple page templates */
.mwr-wrap{max-width:1280px; margin-inline:auto; padding-inline:30px}
.mwr-narrow{max-width:760px; margin-inline:auto; padding-inline:30px}

/* ---- Header / top navigation -------------------------------------------- */
.mwr-topnav{display:flex; align-items:center; gap:26px; padding:22px 0 16px}
.mwr-topnav .mwr-brand{font-family:var(--display),Georgia,serif; font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1}
.mwr-topnav .wp-block-navigation{margin-left:6px}
.mwr-topnav .wp-block-navigation a{font-size:12px; font-weight:600; color:var(--muted)}
.mwr-topnav .wp-block-navigation a:hover{color:var(--ink)}
.mwr-topnav .mwr-subscribe,
.mwr-topnav .mwr-subscribe a{
  margin-left:auto; background:var(--grad); color:#fff; padding:11px 22px; border-radius:40px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; border:none; cursor:pointer;
}
.mwr-topnav .wp-block-navigation .wp-block-navigation__responsive-container-open,
.mwr-topnav .wp-block-navigation .wp-block-navigation__responsive-container-close{color:var(--ink)}

/* ---- Masthead (homepage) ------------------------------------------------- */
.mwr-mhead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:8px 0 26px; flex-wrap:wrap}
.mwr-mhead .mwr-big{
  font-family:var(--display),Georgia,serif; font-weight:900; font-size:clamp(40px,8vw,104px);
  line-height:.92; letter-spacing:-.02em; margin:0;
}
.mwr-mhead .mwr-right{text-align:right; flex:none; padding-bottom:10px}
.mwr-mhead .mwr-tagline{font-size:17px; color:var(--muted); margin-bottom:7px; transition:opacity .3s}
.mwr-live{display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.dot{width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block}
@media (prefers-reduced-motion:no-preference){ .dot{animation:mwr-pulse 1.8s ease-in-out infinite} }
@keyframes mwr-pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* ---- Bento grid ---------------------------------------------------------- */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,auto); gap:16px; margin:0}
.card{
  border-radius:24px; padding:28px; position:relative; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; min-height:0;
}
.card:hover{transform:translateY(-5px); box-shadow:0 24px 50px rgba(28,23,18,.18)}
.glass{background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--glassb)}
.gradc{background:var(--grad); color:#fff}
.gradc::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.26)); pointer-events:none}
.gradc>*{position:relative; z-index:1}

/* Image cards: works for the .imgc pattern and for core Cover blocks */
.imgc{padding:0; color:#fff}
.imgc img,
.imgc .wp-block-cover__image-background{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; transition:transform .8s ease}
.imgc:hover img,
.imgc:hover .wp-block-cover__image-background{transform:scale(1.05)}
.imgc .scrim,
.imgc .wp-block-cover__background{position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,10,12,.1) 0%,rgba(16,10,12,.18) 42%,rgba(16,10,12,.82) 100%); opacity:1}
.imgc .inner,
.imgc .wp-block-cover__inner-container{position:relative; z-index:1; margin-top:auto; padding:28px; width:100%}
.imgc .inner h1,.imgc .inner h2,.imgc .inner h3,
.imgc .wp-block-cover__inner-container h1,
.imgc .wp-block-cover__inner-container h2,
.imgc .wp-block-cover__inner-container h3{
  font-family:var(--display),Georgia,serif; font-weight:800; line-height:.98; letter-spacing:-.02em; margin:6px 0 0;
}
.imgtag{
  position:absolute; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5); color:#fff; padding:5px 11px; border-radius:30px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
}
.imgtag .fr{width:11px; height:9px; border:1.5px solid #fff; border-radius:2px; display:inline-block}

/* Bento placement */
.lead{grid-column:1/3; grid-row:1/3}
.latest{grid-column:3/4; grid-row:1/3}
.pick{grid-column:4/5; grid-row:1/2}
.listc{grid-column:4/5; grid-row:2/3}
.storyA{grid-column:1/3; grid-row:3/4}
.storyB{grid-column:3/5; grid-row:3/4}

/* Lead card title (cover or pattern) */
.lead .inner .kick,
.lead .wp-block-cover__inner-container .kick{margin-bottom:10px; opacity:.95}
.lead h1,.lead h2,
.lead .wp-block-cover__inner-container :is(h1,h2){font-size:clamp(28px,3.6vw,46px)}

/* Latest list */
.latest .head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.latest h3{font-family:var(--display),Georgia,serif; font-size:16px; font-weight:700; margin:0}
.latest ul,.latest .wp-block-post-template{list-style:none; margin:0; padding:0; display:block}
.latest li,.latest .wp-block-post-template > li{
  list-style:none; display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); margin:0;
}
.latest li:last-child,.latest .wp-block-post-template > li:last-child{border-bottom:none}
.latest .thumb,.latest .wp-block-post-featured-image img{width:46px; height:46px; border-radius:10px; object-fit:cover; object-position:50% 25%; flex:none}
.latest .wp-block-post-featured-image{flex:none; margin:0}
.latest .tx{min-width:0; flex:1}
.latest .tx .ft{display:flex; gap:8px; margin-bottom:3px; align-items:baseline; justify-content:space-between}
.latest .kick,.latest .wp-block-post-terms{color:var(--accent); font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1}
.latest .time,.latest .wp-block-post-date{flex:none}
.latest a,.latest .wp-block-post-title a,.latest .wp-block-post-title{font-weight:600; font-size:13px; line-height:1.2; display:block; margin:0}
.latest a:hover,.latest .wp-block-post-title a:hover{color:var(--accent)}

/* Editor's Pick card */
.pick .kick{margin-bottom:auto; opacity:.9}
.pick .name{font-family:var(--display),Georgia,serif; font-size:20px; font-weight:800; line-height:1.1; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pick .v{font-size:12px; opacity:.93; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pick .badge{position:absolute; top:24px; right:24px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.9; z-index:2}

/* List teaser card */
.listc .kick{color:var(--accent); margin-bottom:auto}
.listc h4{font-family:var(--display),Georgia,serif; font-size:18px; font-weight:700; line-height:1.1; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.listc .meta{font-size:12px; color:var(--muted); margin:0}

/* Story cards */
.storyA .kick{color:#fff; opacity:.9; margin-bottom:auto}
.storyA h3{font-family:var(--display),Georgia,serif; font-size:clamp(20px,2.2vw,28px); font-weight:700; line-height:1.08; letter-spacing:-.01em; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
/* Links inside the queried curated cards inherit the card's text colour */
.pick .name a,.storyA h3 a{color:#fff}
.listc h4 a{color:var(--ink)}
.lc h4 a{color:var(--ink)}
.lc-ex{font-size:13px; color:var(--muted); line-height:1.45; margin:8px 0 0}
.storyB .inner .kick,.storyB .wp-block-cover__inner-container .kick{margin-bottom:10px}
.storyB h3,.storyB .wp-block-cover__inner-container :is(h2,h3){font-size:clamp(22px,2.4vw,30px); font-weight:700; line-height:1}

/* Query-Loop-driven image cards (lead, storyB): featured image fills the card,
   gradient scrim, title overlaid at the bottom. */
.imgc .wp-block-query,
.imgc .mwr-q-fill,
.imgc .wp-block-post-template,
.imgc .wp-block-post-template > li{height:100%; margin:0; padding:0; list-style:none}
.imgc .wp-block-post-template{display:block}
.imgc .wp-block-post-template > li{position:relative; display:flex; flex-direction:column}
.imgc .wp-block-post-featured-image{position:absolute; inset:0; margin:0; z-index:0; border-radius:0}
.imgc .wp-block-post-featured-image a,
.imgc .wp-block-post-featured-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; border-radius:0}
.imgc .wp-block-post-featured-image img{transition:transform .8s ease}
.imgc:hover .wp-block-post-featured-image img{transform:scale(1.05)}
.imgc .wp-block-post-template > li::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(16,10,12,.1) 0%,rgba(16,10,12,.18) 42%,rgba(16,10,12,.82) 100%)}
.imgc .inner{position:relative; z-index:2; margin-top:auto; padding:28px; color:#fff; width:100%}
.imgc .inner .wp-block-post-terms,
.imgc .inner .wp-block-post-terms a{color:#fff; opacity:.95; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.imgc .inner .wp-block-post-title{font-family:var(--display),Georgia,serif; font-weight:800; line-height:1.04; letter-spacing:-.015em; margin:6px 0 0; font-size:clamp(22px,2.4vw,30px); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.imgc.lead .inner .wp-block-post-title{font-size:clamp(28px,3.6vw,46px)}
.imgc .inner .wp-block-post-title a{color:#fff}

/* Latest card internals */
.latest .head .dot-wrap{margin:0; line-height:0}
.latest .wp-block-query{margin:0}
.latest .wp-block-post-title a{color:var(--ink)}

/* ---- Section bands ------------------------------------------------------- */
.band{padding:60px 0 0}
.sectionhead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap}
.sectionhead .big{font-family:var(--display),Georgia,serif; font-size:clamp(26px,3.2vw,40px); font-weight:800; letter-spacing:-.02em; margin:0}
.sectionhead .m{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent)}

/* Five pillars */
.pillars{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.pcol{background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glassb); border-radius:18px; padding:18px}
.pcol h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:12px}
.pcol h4 span,.pcol h4 a{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.pcol .it{padding:9px 0; border-bottom:1px solid var(--line)}
.pcol .it:last-child{border-bottom:none}
.pcol .it a,.pcol a.post{font-weight:600; font-size:14px; line-height:1.2; display:block; margin-bottom:5px; color:var(--ink); background:none; -webkit-text-fill-color:currentColor}
.pcol .it a:hover{color:var(--accent)}

/* The Lists */
.lists{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.lc{background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glassb); border-radius:20px; padding:24px}
.lc .n{font-family:var(--display),Georgia,serif; font-size:34px; font-weight:800; line-height:1; margin:0}
.lc h4{font-family:var(--display),Georgia,serif; font-size:17px; font-weight:700; line-height:1.08; margin:6px 0 12px}
.lc ol{list-style:none; counter-reset:r; margin:0; padding:0}
.lc li{counter-increment:r; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line); display:flex; gap:9px; align-items:baseline}
.lc li:last-child{border-bottom:none}
.lc li::before{content:counter(r); font-weight:700; color:var(--accent); font-size:11px}

/* ---- Newsletter band ----------------------------------------------------- */
.news{
  background:var(--grad); color:#fff; border-radius:28px; padding:62px 44px; margin-top:62px;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; position:relative; overflow:hidden;
}
.news::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.2))}
.news>*{position:relative; z-index:1}
.news h3{font-family:var(--display),Georgia,serif; font-size:clamp(28px,4vw,50px); font-weight:800; line-height:.96; letter-spacing:-.02em; margin:0}
.news p{opacity:.92; margin-top:10px; max-width:28em}
.signup{display:flex; min-width:330px; border:1px solid rgba(255,255,255,.55); border-radius:40px; overflow:hidden; background:rgba(255,255,255,.16)}
.signup input{flex:1; background:none; border:none; color:#fff; padding:14px 20px; font-family:inherit; outline:none; font-size:15px}
.signup input::placeholder{color:rgba(255,255,255,.7)}
.signup button{background:#fff; color:var(--ink); border:none; padding:0 24px; font-family:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; cursor:pointer}
/* Jetpack Subscribe block inside the gradient newsletter band */
.news .wp-block-jetpack-subscriptions__container{width:100%; max-width:420px}
.news .wp-block-jetpack-subscriptions__form{margin:0}
.news .wp-block-jetpack-subscriptions input[type="email"]{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); color:#fff; border-radius:40px; padding:14px 20px; font-family:inherit}
.news .wp-block-jetpack-subscriptions input[type="email"]::placeholder{color:rgba(255,255,255,.7)}
.news .wp-block-jetpack-subscriptions__button{border-radius:40px; font-family:inherit; font-weight:700; text-transform:uppercase; letter-spacing:.08em}

/* ---- Footer -------------------------------------------------------------- */
.mwr-footer{padding:40px 0 60px}
.mwr-footer .frow{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.mwr-footer .mwr-brand{font-family:var(--display),Georgia,serif; font-weight:800; font-size:19px; letter-spacing:-.02em}
.mwr-footer .fnav{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.mwr-footer .fnav a:hover{color:var(--ink)}
.mwr-footer .fine{font-size:10px; color:var(--muted); margin-top:22px; letter-spacing:.04em}

/* ---- Disclosure label (Featured Partner / Sponsored) --------------------- */
.mwr-disclosure{
  display:inline-block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:#fff; background:var(--ink); padding:5px 11px; border-radius:30px; margin-bottom:18px;
}

/* ---- Single / archive / page reading layout ----------------------------- */
.mwr-article{padding:30px 0 60px}
.mwr-article .wp-block-post-title{font-size:clamp(30px,5vw,56px); line-height:1.05; letter-spacing:-.01em; margin:0 0 16px}
.mwr-article .wp-block-post-content{font-size:18px; line-height:1.7}
.mwr-article .wp-block-post-content :is(h2,h3){margin-top:1.6em}
.mwr-article .wp-block-post-content :is(h2){font-size:28px}
.mwr-article .wp-block-post-content :is(h3){font-size:22px}
.mwr-article .wp-block-post-content a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.mwr-article .wp-block-post-featured-image img{border-radius:24px}
.mwr-meta{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.mwr-meta .wp-block-post-terms a,.mwr-meta a{color:var(--accent)}

/* Archive / index cards */
.mwr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.mwr-grid .wp-block-post{background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--glassb); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; height:100%}
.mwr-grid .wp-block-post-featured-image,
.mwr-grid .wp-block-post-featured-image a{display:block; width:100%; aspect-ratio:16/10; overflow:hidden; margin:0}
.mwr-grid .wp-block-post-featured-image img{border-radius:0; width:100%; height:100%; object-fit:cover; aspect-ratio:auto}
.mwr-grid .mwr-cardbody{padding:18px}
.mwr-grid .wp-block-post-title{font-size:18px; line-height:1.15; margin:6px 0}
.mwr-grid .wp-block-post-excerpt{font-size:13px; color:var(--muted)}

.mwr-pagination .wp-block-query-pagination-numbers,
.mwr-pagination a{font-weight:700}

/* ---- Scroll reveal ------------------------------------------------------- */
/* Content is visible by default. JS adds .mwr-armed to opt elements into the
   reveal animation, so if JS never runs nothing is hidden. */
@media (prefers-reduced-motion:no-preference){
  .rise.mwr-armed{opacity:0; transform:translateY(18px)}
  .rise.mwr-armed.is-visible{animation:mwr-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes mwr-rise{to{opacity:1; transform:none}}
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:960px){
  .bento{grid-auto-rows:auto}
  .lead,.latest,.pick,.listc,.storyA,.storyB{grid-column:1/-1; grid-row:auto}
  .lead{min-height:340px} .latest{min-height:320px} .storyB{min-height:280px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .lists{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:1fr}
  .mwr-topnav .wp-block-navigation{display:none}
  .mwr-mhead{flex-direction:column; align-items:flex-start}
  .mwr-mhead .mwr-right{text-align:left}
  .mwr-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .pillars,.lists,.mwr-grid{grid-template-columns:1fr}
  .signup{min-width:0; width:100%}
  .mwr-wrap,.mwr-narrow{padding-inline:18px}
}