/* ============================================================
   BLOG / MAGAZINE ARTICLE — blogpost.css
   Live-replica layer for luxuri.com/blog/{slug}.

   Measured on luxuri.com/blog/top-miami-events-in-may-2025
   (Chrome, 1440x1000 and 390x844):
     hero    : pt-14 + min-h-40vh cover photo, black/20 wash +
               to-black gradient  -> 400px
     shell   : max-w-7xl p-6 / lg:p-8, inner measure max-w-[90rch]
               centred -> 824px content column at 1440
     title   : Mulish 40/44.44 300 ls1, date 16/24 400 italic,
               same baseline row, 24px below
     body    : content-format — p 16/28 300 with 16px between
               blocks; h2 Mulish 32/38.4 300 ls.8; h6 Mulish
               16/24 300 ls.4; links amber-50 underlined
     images  : own full-bleed-to-measure block, radius 16,
               max-h 60svh, container py 0
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.post-hero {
  position: relative;
  background: var(--black);
  padding-top: 56px;            /* live pt-14 */
  min-height: 40vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.post-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.post-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .2);          /* live bg-black/20 multiply */
  mix-blend-mode: multiply;
  pointer-events: none;
}
.post-hero-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 1) 95%);
}
.post-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 48px auto;            /* live my-12 */
  padding: 72px 24px;           /* live py-18 */
}

/* ── SHELL ────────────────────────────────────────────────── */
.post-section {
  width: 100%;
  max-width: 1280px;            /* live max-w-7xl */
  margin: 0 auto;
  padding: 24px;                /* live p-6 */
}
@media (min-width: 1024px) { .post-section { padding: 32px; } }   /* live lg:p-8 */
/* live drops the vertical padding on the image blocks so the photo
   sits tight between the paragraphs above and below it */
.post-section--media { padding-top: 0; padding-bottom: 0; }

/* live: max-w-[90rch] — a reading measure, ~824px at this type size */
.post-measure {
  max-width: 824px;
  margin: 0 auto;
}

/* ── TITLE ROW ────────────────────────────────────────────── */
.post-head {
  display: flex;
  flex-direction: column;       /* live max-lg:flex-col */
  gap: 16px;                    /* live gap-4 */
  margin-bottom: 24px;          /* live space-y-6 */
}
@media (min-width: 1024px) {
  .post-head { flex-direction: row; align-items: flex-end; }   /* live lg:items-end */
}
.post-title {
  flex: 1 1 auto;               /* live grow */
  font-family: var(--lx-font-accent);
  font-size: 40px;
  line-height: 44.4444px;
  font-weight: 300;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0;
}
.post-date {
  flex: 0 0 auto;               /* live flex-shrink-0 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;             /* live font-normal */
  font-style: italic;
  color: var(--lx-zinc-50);
}

/* ── BODY COPY (live's .content-format) ───────────────────── */
.post-body {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
  text-align: left;
}
/* live content-format: every block flush, 16px between siblings */
.post-body > * { margin: 0; }
.post-body > * + * { margin-top: 16px; }
.post-body p { line-height: 28px; }   /* live content-format p 1.75 */

.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6 {
  font-family: var(--lx-font-accent);
  font-weight: 300;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0;
}
.post-body h1 { font-size: 40px; line-height: 44.4444px; margin-top: 48px; margin-bottom: 24px; }
.post-body h2 { font-size: 32px; line-height: 38.4px; margin-top: 40px; margin-bottom: 16px; }
.post-body h3,
.post-body h4 { font-size: 24px; line-height: 33.6px; margin-top: 32px; margin-bottom: 16px; }
.post-body h5 { font-size: 20px; line-height: 31.1111px; margin-top: 32px; margin-bottom: 16px; }
.post-body h6 { font-size: 16px; line-height: 24px; margin-top: 32px; margin-bottom: 16px; }
.post-body > :first-child { margin-top: 0; }

.post-body a {
  color: #f9f6f0;               /* live amber-50 */
  text-decoration: underline;
}
.post-body a:hover { color: #e9d9c3; }
/* live: <strong> is `bolder`, which against the 300 body/heading weight
   resolves to 400 — so headings stay light rather than jumping to 700 */
.post-body strong, .post-body b { font-weight: bolder; }
.post-body ul, .post-body ol { margin: 16px 0; padding-left: 24px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin: 4px 0; line-height: 28px; }
.post-body blockquote {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 2px solid var(--lx-zinc-700);
  color: var(--lx-zinc-200);
}
.post-body img {
  width: 100%;
  height: auto;
  max-height: 60svh;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ── STANDALONE IMAGE BLOCK ───────────────────────────────── */
.post-figure { margin: 0; }
.post-figure img {
  width: 100%;
  height: auto;
  max-height: 60svh;            /* live max-h-[60svh] */
  object-fit: cover;
  border-radius: 16px;          /* live rounded-2xl */
  display: block;
}

/* ── SPLIT / TWO-COLUMN / FAQ SECTIONS (admin section types) ── */
.post-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) { .post-split { grid-template-columns: 1fr 1fr; } }
.post-split-media img {
  width: 100%;
  height: 100%;
  max-height: 60svh;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.post-split--right .post-split-media { order: 2; }

.post-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) { .post-two-col { grid-template-columns: 1fr 1fr; } }

.post-sec-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 300;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0 0 16px;
}
.post-btn {
  display: inline-block;
  margin: 16px 8px 0 0;
  padding: 6px 10px;
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 6px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--lx-zinc-50);
  text-decoration: none;
  transition: background-color .18s;
}
.post-btn:hover { background: var(--lx-zinc-800); color: var(--lx-zinc-50); }

.post-faq details {
  border-bottom: 1px solid var(--lx-zinc-800);
  padding: 16px 0;
}
.post-faq summary {
  cursor: pointer;
  font-family: var(--lx-font-accent);
  font-size: 20px;
  line-height: 31.1111px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  list-style: none;
}
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; float: right; }
.post-faq details[open] summary::after { content: "\2212"; }

/* ── SPLASH / HERO SECTIONS ───────────────────────────────── */
.post-splash {
  height: 60svh;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
}
.post-hero-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 64px 32px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}
.post-hero-block-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.post-hero-block-copy { position: relative; z-index: 1; }

/* footer make-up, same as the other pages */
.post-bottom-pad { height: 64px; }
@media (max-width: 1023px) { .post-bottom-pad { height: 48px; } }