/* ==========================================================================
   UNA Magazine — Page Layouts
   --------------------------------------------------------------------------
   Shared by THREE consumers so they can never drift apart:
     • reader  (.una-page  is the flip page root)
     • print   (.print-page is the PDF page root)
     • builder (.builder-page-preview is the canvas root)
   Each layout fills its page root (100% x 100%). Full-bleed layouts position
   an absolute .lay__bg; flow layouts use a padded flex column.
   ========================================================================== */

.lay {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Shared atoms ------------------------------------------------------------ */
.lay__kicker {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lay__title {
  margin: 0 0 14px;
  line-height: 1.18;
  font-weight: 800;
}
.lay__body {
  margin: 0;
  overflow: hidden;
}
.lay__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
  display: block;
}

/* Divider (markup comes from PHP/JS, base spacing here) */
.lay .una-page__divider { margin: 4px 0 16px; }
.una-page__divider--line { height: 3px; width: 60px; border-radius: 3px; }
.una-page__divider--dots { letter-spacing: 6px; font-size: 1rem; line-height: 1; }
.una-page__divider--ornament { font-size: 1.5rem; line-height: 1; }

/* Full-bleed helpers ------------------------------------------------------ */
.lay__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lay__bg--empty {
  /* Background set via inline style from builder (bgColor/gradient). No hardcoded fallback. */
}
.lay__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 14, 20, 0.92) 0%, rgba(8, 14, 20, 0.45) 38%, rgba(8, 14, 20, 0) 64%);
}
.lay__scrim--full {
  background: linear-gradient(to top, rgba(8, 14, 20, 0.95) 6%, rgba(8, 14, 20, 0.15) 52%, rgba(8, 14, 20, 0.4) 100%);
}
.lay__kicker--light { color: #ffd9a8; }
.lay__title--light,
.lay__body--light { color: #ffffff; }
.lay__body--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  opacity: 0.92;
}

/* ── Standard ───────────────────────────────────────────────────────────── */
.lay--standard { justify-content: flex-start; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.lay--hero { justify-content: flex-end; }
.lay--hero .lay__overlay { position: relative; z-index: 2; margin-top: auto; }
.lay--hero .lay__title--light { font-weight: 800; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }

/* ── Feature ────────────────────────────────────────────────────────────── */
.lay--feature .lay__title--xl {
  font-size: 2.2em;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.lay--feature .lay__img--wide {
  height: 180px;
  border-radius: 6px;
}
.lay__body--cols {
  column-count: 2;
  column-gap: 22px;
  column-rule: 1px solid rgba(0,0,0,0.08);
  text-align: justify;
}

/* ── Editorial ──────────────────────────────────────────────────────────── */
.lay--editorial { justify-content: flex-start; }
.lay__img--inset {
  float: inline-start;
  width: 42%;
  height: 150px;
  margin: 4px 16px 10px 0;
}
.lay__body--dropcap::first-letter {
  float: inline-start;
  font-size: 3.4em;
  line-height: 0.78;
  font-weight: 800;
  padding: 4px 10px 0 0;
  color: var(--una-accent-600, #0e7c6b);
}

/* ── Gallery ────────────────────────────────────────────────────────────── */
.lay--gallery { justify-content: flex-end; }
.lay--gallery .lay__caption {
  position: relative;
  z-index: 2;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid var(--una-accent-600, #0e7c6b);
}
/* Caption at top of full-bleed image */
.lay--gallery-cap-top { justify-content: flex-start; }
.lay--gallery-cap-top .lay__caption {
  margin-top: 0;
  margin-bottom: auto;
  border-top: none;
  border-bottom: 3px solid var(--una-accent-600, #0e7c6b);
}
/* Flow mode: image is inline, acts like a standard flow layout */
.lay--gallery-flow { justify-content: flex-start; }

.lay__caption-title { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.lay__caption-text { font-size: 0.82rem; color: #56616b; line-height: 1.5; }

/* ── Cover ──────────────────────────────────────────────────────────────── */
.lay--cover { justify-content: space-between; }
.lay__masthead {
  position: relative;
  z-index: 2;
  padding: 20px 24px 0;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.95;
}
.lay__cover-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  text-align: center;
}
.lay__title--cover {
  margin: 0 0 10px;
  color: #fff;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 24px rgba(0,0,0,0.55);
}
.lay__cover-meta {
  display: inline-block;
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 4px 14px;
}

/* ── Custom (free-form canvas) ──────────────────────────────────────────── */
.lay--custom { position: relative; overflow: hidden; }
.lay__custom-el { margin: 0; padding: 0; word-break: break-word; }
.lay__custom-el--title { font-weight: 700; }

/* ── Page Builder (visual layout) — frontend block styles ─────────────────── */
/* Fill the fixed-size positioned page (.print-page / .una-page__scale) exactly
   via inset:0 so the flex column always spans full page height — this lets the
   footer row pin to the bottom reliably, with or without the JS auto-fit. */
.lay--builder { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; }
.lay--builder .pb-canvas { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
/* Fixed page frame (builder = source of truth): header rows, then the BODY,
   then footer rows. The body takes exactly the height left between them and
   CLIPS what does not fit, so the footer never moves; the builder shows the cut
   with a warning. The body reaches over the page's side paddings (and the top /
   bottom padding when no header / footer row is there) so bleeding elements are
   not clipped at the text margins; its padding puts the content back in place. */
.lay--builder .pb-body,
.pbx-page > .pbx-body {
  position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  margin-inline: calc(var(--pb-pad-inline-start, 0px) * -1) calc(var(--pb-pad-inline-end, 0px) * -1);
  padding-inline: var(--pb-pad-inline-start, 0px) var(--pb-pad-inline-end, 0px);
  box-sizing: border-box;
}
.lay--builder .pb-body--no-head,
.pbx-page > .pbx-body--no-head { margin-block-start: calc(var(--pb-pad-block-start, 0px) * -1); padding-block-start: var(--pb-pad-block-start, 0px); }
.lay--builder .pb-body--no-foot,
.pbx-page > .pbx-body--no-foot { margin-block-end: calc(var(--pb-pad-block-end, 0px) * -1); padding-block-end: var(--pb-pad-block-end, 0px); }
/* Under a header row the clip box reaches 32px up behind it, so decorations
   that stick out above the first element (tape corners, ribbons) still show. */
.lay--builder .pb-body:not(.pb-body--no-head),
.pbx-page > .pbx-body:not(.pbx-body--no-head) { margin-block-start: -32px; padding-block-start: 32px; }
/* …but clicks there still reach the header: only the rows inside take pointer events. */
.lay--builder .pb-body, .pbx-page > .pbx-body { pointer-events: none; }
.lay--builder .pb-body > *, .pbx-page > .pbx-body > * { pointer-events: auto; }
/* Rows keep their own height (a "fill page" row's inline flex:1 1 auto still wins). */
.lay--builder .pb-body > .pb-row,
.pbx-page > .pbx-body > .pbx-row { flex: 0 0 auto; }
/* A row is a flex column so a "fill page" row (inline flex:1 1 auto) passes its
   height down to .pb-row__inner; the inner keeps full width regardless of the
   row's inline align-items value (which targets the inner's own flex axis). */
.pb-row { display: flex; flex-direction: column; }
/* Background image for left-to-right pages (an explicit LTR language or a Google translation): the
   columns mirror, so a row/column may carry a mirrored-composition image in --pb-bg-ltr. */
html[dir="ltr"] [style*="--pb-bg-ltr"],
html.translated-ltr [style*="--pb-bg-ltr"] { background-image: var(--pb-bg-ltr) !important; }
.pb-row > .pb-row__inner { flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; }
/* A row that holds a magazine footer element is pinned to the bottom of the A4
   page. margin-block-start:auto works identically in RTL and LTR. */
.lay--builder .pb-canvas > .pb-row--footer { margin-block-start: auto !important; flex: 0 0 auto; }
.lay--builder .pb-canvas > .pb-row--header { flex: 0 0 auto; }
.pb-row__inner,
.pb-col,
.pb-el { box-sizing: border-box; }
/* The last element of a column (a float clearer after it does not count). */
.pb-el:not(:has(~ .pb-el)) { margin-bottom: 0 !important; }
.pb-el__dropcap::first-letter {
  float: inline-start;
  font-size: 3.4em;
  line-height: 0.8;
  font-weight: 800;
  padding-inline-end: 8px;
  margin-top: 4px;
  color: var(--pb-dropcap, #0e7c6b);
}
.pb-el__gallery img { display: block; }

/* Rich text paragraph rhythm, first-line indent and drop cap — the same rules the
   builder canvas uses (page-builder.css), so builder, reader and print measure alike. */
.pb-richtext > p { margin: 0 0 1em; }
.pb-richtext > p:last-child { margin-bottom: 0; }
.pb-rt-indent > p { text-indent: 1.8em; }
.pb-rt-indent > p:first-child { text-indent: 0; }
.pb-rt-dropcap > p:first-child::first-letter {
  float: inline-start;
  font-size: 3.2em;
  line-height: 0.78;
  font-weight: 800;
  padding-inline-end: 10px;
  margin-top: 6px;
  color: var(--rt-accent, #0e7c6b);
}
/* Keep blocks intact when paginating to print. */
.pb-hero, .pb-figure, .pb-edhead, .pb-lead, .pb-edquote, .pb-edhighlight, .pb-statblock, .pb-factbox,
.pb-quotecard, .pb-statement, .pb-quoteday, .pb-testimonial, .pb-speakercard, .pb-voice,
.pb-toc-row, .pb-masthead, .pb-chart, .pb-keyfig, .pb-progress-item, .pb-map,
.pb-wrapfigure, .pb-sidebarstory, .pb-marginnote, .pb-bleed, .pb-chapterhead, .pb-epigraph,
.pb-methodology, .pb-creditsbox, .pb-disclosure, .pb-exclusive, .pb-cover { break-inside: avoid; }
.pb-takeaways li, .pb-timeline li, .pb-comparison tr, .pb-qa-item, .pb-dialogue-item, .pb-lineup li,
.pb-datatable tr, .pb-nextissue li, .pb-updatelog li, .pb-coverlines li { break-inside: avoid; }
.pb-datatable thead { display: table-header-group; }
.pb-comparison table, .pb-datatable table { width: 100%; }

/* quoteposter — ملصق اقتباس (library v2) */
.pb-quoteposter { break-inside: avoid; }
.pb-quoteposter__text { hyphens: manual; }
.pb-quoteposter--qp_outline .pb-quoteposter__text { paint-order: stroke fill; }

/* v2 shared pieces */
.pb-st-wave i { display: block; flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--wave, currentColor); opacity: .85; }

/* library v2 — quotes batch A */
.pb-quoteribbon, .pb-marginquote, .pb-numberquote, .pb-voicebubble, .pb-translationquote { break-inside: avoid; }
.pb-quoteribbon__text, .pb-marginquote__text { hyphens: manual; }

/* library v2 — quotes batch B */
.pb-handwrittenquote, .pb-quoteseries__item, .pb-quotecompare__side, .pb-quotewall__item { break-inside: avoid; }

/* library v2 — quotes batch C */
.pb-reactionquotes__item, .pb-quotetimeline__item, .pb-audioquote, .pb-videoquote { break-inside: avoid; }

/* library v2 — talks batch 1 */
.pb-keynotecard, .pb-talkhighlights__item, .pb-openclose__panel, .pb-panelroundup__item, .pb-rapidfire__item, .pb-askedanswered { break-inside: avoid; }

/* library v2 — talks batch 2 */
.pb-interviewpull, .pb-qasection, .pb-pressconference__item, .pb-verbatim, .pb-wordcloud, .pb-sessioncard { break-inside: avoid; }

/* library v2 — speakers batch 1 */
.pb-speakerbio, .pb-speakerpair__item, .pb-facesgrid__item, .pb-speakerindex__item, .pb-speakerstats { break-inside: avoid; }

/* library v2 — speakers batch 2 */
.pb-moderatorcard, .pb-speakerquote, .pb-speakerjourney, .pb-delegatestrip, .pb-speakerlead { break-inside: avoid; }

/* library v2 — phase 4 batch 1 */
.pb-list__item, .pb-callout, .pb-kicker, .pb-iconrow__item, .pb-summarybox, .pb-stepguide__item, .pb-glossary__item, .pb-numberedfacts__item, .pb-boxedaside { break-inside: avoid; }
.pb-columnstext p { margin: 0 0 .8em; }
.pb-columnstext p:last-child { margin-bottom: 0; }

/* library v2 — phase 4 batch 2 */
.pb-visualtoc__item, .pb-sectionintro, .pb-donutstat, .pb-rankinglist__item, .pb-comparestat, .pb-pollresults__item, .pb-continuation, .pb-aidisclosure, .pb-photorights { break-inside: avoid; }

/* library v2 — phase 4 batch 3 */
.pb-runningfoot, .pb-thumbtab, .pb-issueinfo, .pb-serieslabel, .pb-crosshead, .pb-keyquestion, .pb-contextbox, .pb-opinionhead, .pb-articleend, .pb-updatedstamp, .pb-factstrip { break-inside: avoid; }
.pb-crosshead { break-after: avoid; }

.pb-leadtwocol { break-inside: avoid; }

/* library v2 — phase 5 official */
.pb-pressrelease, .pb-resolution__item, .pb-agreement, .pb-delegation__item, .pb-orgchart, .pb-signature, .pb-officialletter, .pb-decisionsummary { break-inside: avoid; }
.pb-pressrelease__text p, .pb-officialletter__text p { margin: 0 0 .7em; }
.pb-pressrelease__text p:last-child, .pb-officialletter__text p:last-child { margin-bottom: 0; }

/* library v2 — phase 5 members */
.pb-agencycard, .pb-countrycard, .pb-flagstrip, .pb-membermap, .pb-partnerlogos__item, .pb-memberstats { break-inside: avoid; }

/* library v2 — phase 6 events */
.pb-eventcard, .pb-programtable__row, .pb-calendarstrip__item, .pb-venuecard, .pb-eventrecap, .pb-registercta { break-inside: avoid; }

/* library v2 — phase 6 photo */
.pb-photoessay__item, .pb-beforeafter, .pb-contactsheet, .pb-photoquote, .pb-photocredits, .pb-mosaic { break-inside: avoid; }

/* library v2 — phase 6 honors */
.pb-awardcard, .pb-honorroll__item, .pb-milestone, .pb-tribute, .pb-certificate { break-inside: avoid; }

/* library v2 — phase 7 frames 1 */
.pb-framesimple, .pb-framepolaroid, .pb-framefilm, .pb-frametape, .pb-framearch, .pb-framegeo, .pb-frametorn { break-inside: avoid; }

/* library v2 — phase 7 frames 2 */
.pb-framestack, .pb-framedevice, .pb-framestory, .pb-framecaption, .pb-frameprofile, .pb-framestat, .pb-framecutout { break-inside: avoid; }

/* library v2 — phase 7 media */
.pb-videochapters, .pb-videostrip, .pb-videolink, .pb-podcastepisode, .pb-podcastseries__item, .pb-podcasthost, .pb-audiofeature, .pb-transcriptbox__item, .pb-playlist__item, .pb-mediawall__item, .pb-livecard { break-inside: avoid; }

/* library v2 — papers (phase 8) */
/* The paper layer lives inside the layout root (.lay), which isolates its own stacking when a paper is set. */
.una-page__paper, .pb-paperband__paper { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.pb-paperband { break-inside: avoid; }

/* library v2 — phase 9 learning */
.pb-coursecard, .pb-dosdonts__col, .pb-checklist__item, .pb-tipbox, .pb-casestudy__panel, .pb-quizbox__item { break-inside: avoid; }

/* RTL line charts: the labels and values run right-to-left, so the plot is mirrored to follow them. */
[dir="rtl"] .pb-chart svg[preserveAspectRatio="none"] { transform: scaleX(-1); }

/* THE BUILDER IS THE SOURCE OF TRUTH: page content must look the same in the page
   builder canvas (.pbx-page .pbx-el__preview, inside the dashboard), the issue-builder
   preview, the reader, the print view and the PDF (all .lay .pb-el). The rules below
   are the shared base for both scopes; check with docs/youth-issue-tools/view_consistency.mjs.
   Long words and links may break anywhere, as they always did in the canvas. */
.lay .pb-el, .pbx-page .pbx-el__preview { overflow-wrap: anywhere; }

/* Builder elements own their typography. Heading tags inside an element must not
   pick up site-wide heading styles (main.css) or Bootstrap's responsive h1–h6
   sizes, which the reader page loads: hand them back to the browser defaults so
   the reader, the print view, the PDF and the builder all agree. The element's
   own inline font-size / weight / colour still win over these. */
.lay .pb-el :is(h1, h2, h3, h4, h5, h6),
.pbx-page .pbx-el__preview :is(h1, h2, h3, h4, h5, h6) {
  font-size: revert;
  font-weight: revert;
  margin: revert;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* Same idea for the rest of Bootstrap's reboot inside elements (paragraph / list / figure /
   quote margins, image alignment, small, bold, links, tables). :where(.pb-el) adds no weight,
   so these sit at tag level: they beat Bootstrap's bare tag rules (layouts.css loads later)
   while every element-specific class rule and inline style still wins. */
:where(.pb-el) p, :where(.pb-el) ul, :where(.pb-el) ol, :where(.pb-el) dl, :where(.pb-el) dd, :where(.pb-el) figure, :where(.pb-el) blockquote, :where(.pb-el) address, :where(.pb-el) pre { margin: revert; }
:where(.pb-el) ul, :where(.pb-el) ol { padding-inline-start: revert; }
:where(.pb-el) img, :where(.pb-el) svg { vertical-align: revert; }
:where(.pb-el) small { font-size: revert; }
:where(.pb-el) b, :where(.pb-el) strong { font-weight: revert; }
:where(.pb-el, .pbx-el__preview) a { color: inherit; text-decoration: none; }
:where(.pb-el, .pbx-el__preview) img { max-width: 100%; }
:where(.pb-el) table { border-collapse: revert; caption-side: revert; }
:where(.pb-el) th { text-align: revert; font-weight: revert; }
:where(.pb-el) label { display: revert; margin-bottom: revert; }
:where(.pb-el) hr { margin: revert; opacity: revert; color: revert; border-top: revert; }

/* ===================================================================
   Reader interface reboot (body.una-reader-page).
   The reader no longer loads Bootstrap. These are the only Bootstrap base
   ("reboot") rules its toolbar, panels, drawer and composer relied on, copied
   from bootstrap.rtl 5.3.3 and scoped to the reader page. They sit in a cascade
   layer so, like Bootstrap before, they never beat the reader's own unlayered
   styles (reader.css / main.css / engagement.css); only `[hidden]` keeps its
   !important. Magazine page content (.pb-el) is reset separately above.
   =================================================================== */
@layer una-reader-reboot {
  body.una-reader-page *, body.una-reader-page *::before, body.una-reader-page *::after { box-sizing: border-box; }
  body.una-reader-page [hidden] { display: none !important; }
  body.una-reader-page :is(button, input, optgroup, select, textarea) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
  body.una-reader-page :is(button, select) { text-transform: none; }
  body.una-reader-page button { border-radius: 0; }
  body.una-reader-page :is(button, [type="button"], [type="reset"], [type="submit"]) { -webkit-appearance: button; appearance: button; }
  body.una-reader-page :is(button, [type="button"], [type="reset"], [type="submit"]):not(:disabled) { cursor: pointer; }
  body.una-reader-page textarea { resize: vertical; }
  body.una-reader-page p { margin-top: 0; margin-bottom: 1rem; }
  body.una-reader-page :is(ul, ol) { padding-inline-start: 2rem; margin-top: 0; margin-bottom: 1rem; }
  body.una-reader-page :is(ul, ol) :is(ul, ol) { margin-bottom: 0; }
  body.una-reader-page :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .5rem; line-height: 1.2; }
  body.una-reader-page :is(img, svg) { vertical-align: middle; }
  body.una-reader-page :is(b, strong) { font-weight: bolder; }
  body.una-reader-page small { font-size: .875em; }
  body.una-reader-page label { display: inline-block; }
  body.una-reader-page hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
  body.una-reader-page table { caption-side: bottom; border-collapse: collapse; }
  body.una-reader-page th { text-align: inherit; }
}