/*
 Theme Name: Blocksy Child
 Template: blocksy
 Version: 1.0.0
 Description: Child theme for Blocksy (loads custom styles last).
*/

/* =========================
   YOUR EXISTING STYLES
   (No changes here)
   ========================= */

/* Indo-Fijian.org – Toggle (Details) styling */
.entry-content details {
  border: 1px solid #7a0026;
  border-radius: 8px;
  margin: 12px 0;
  background: #fff;
  overflow: hidden;
}

/* Header row */
.entry-content summary {
  list-style: none;            /* hide default marker */
  cursor: pointer;
  padding: 0.65rem 0.95rem;
  background: #7a0026;         /* maroon */
  color: #fff;
  font-weight: 700;            /* bold */
  font-style: italic;          /* italic */
  position: relative;
}
.entry-content summary::-webkit-details-marker { display: none; }
.entry-content summary::after {                 /* chevron */
  content: "▸";
  position: absolute;
  right: 12px;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.entry-content details[open] summary::after { transform: rotate(90deg); }

/* Body area */
.entry-content details > *:not(summary) {
  padding: 0.85rem 0.95rem;
  border-top: 1px solid #eee;
}

/* Lists inside toggles: tidy spacing */
.entry-content details .wp-block-list {
  margin: 0.25rem 0 0;
}
.entry-content details .wp-block-list li { margin: 0.25rem 0; }

/* Keyboard focus */
.entry-content summary:focus {
  outline: 2px solid #7a0026;
  outline-offset: 2px;
}

/* Optional per-page variant: add class "fx-toggle-alt" to the Details block */
.entry-content details.fx-toggle-alt summary { background: #003a8c; } /* deep blue */
.entry-content details.fx-toggle-alt { border-color: #003a8c; }

/* Magazine infobox / callout / pull-quote */
.fx-infobox {
  border: 1px solid rgba(0,0,0,0.08);
  padding: 16px 18px;
  background: #f7fbff;
  border-left: 4px solid #2a6fdb; /* match your blue */
  margin: 0 0 1rem 0;
}
.fx-callout {
  border: 1px dashed rgba(0,0,0,0.15);
  padding: 14px 16px;
  background: #fff8f0;
  border-left: 4px solid #b24a2c; /* warm accent */
  margin: 1rem 0;
}
.fx-pullquote {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 10px 14px;
  border-left: 4px solid #b24a2c;
  background: #fff9f3;
  max-width: 420px;
}
.fx-pullquote.alignright { float: right; margin: .25rem 0 1rem 1rem; }
@media (max-width: 960px) { .fx-pullquote.alignright { float: none; margin: 0 0 1rem 0; } }

/* Details toggles */
.fx-details summary { cursor: pointer; list-style: none; }
.fx-details summary::-webkit-details-marker { display: none; }
.fx-details summary strong em { color: #6b1d1d; } /* burgundy accent */
.fx-details { border-top: 1px solid rgba(0,0,0,0.08); padding-top: .5rem; }

/* One-sidebar layout helper (if needed) */
.fx-layout.one-sidebar {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start;
}
@media (max-width: 960px) { .fx-layout.one-sidebar { grid-template-columns: 1fr; } }

.alignright { float: right; margin: 0 0 1rem 1rem; }
@media (max-width: 960px) { .alignright { float: none; margin: 0 0 1rem 0; } }


/* =========================
   NEW: GLOBAL PARAGRAPH SPACING + PRO PULL QUOTES
   ========================= */

/* Custom properties so you can tweak in one place */
:root {
  --if-paragraph-space: 0.9rem;      /* space between paragraphs */
  --if-line-height: 1.8;             /* comfortable reading line-height */
  --if-max-text-width: 75ch;         /* optional wrap width */
  --if-pq-font: Georgia, "Times New Roman", Times, serif; /* pullquote font */
  --if-pq-text: #1f2937;             /* slate-800 style body text */
  --if-pq-accent: #b24a2c;           /* matches your existing warm accent */
  --if-pq-bg: #fff9f3;
  --if-pq-cite: #475569;             /* slate-600 */
}

/* Global paragraph rhythm inside post/page content */
:where(.entry-content, .wp-block-post-content) p:not(.has-background) {
  line-height: var(--if-line-height);
  margin-top: var(--if-paragraph-space);
  margin-bottom: var(--if-paragraph-space);
  max-width: var(--if-max-text-width);
}

/* Keep headings tight above/below paragraphs for a nice flow */
:where(.entry-content) h1 + p,
:where(.entry-content) h2 + p,
:where(.entry-content) h3 + p { margin-top: 0.5rem; }

/* Don’t over-space UI bits */
:where(.entry-content) .wp-block-buttons p,
:where(.entry-content) .wp-block-columns p,
:where(.entry-content) .wp-block-media-text p { max-width: none; }

/* Space after images/figures so following text breathes */
:where(.entry-content) figure,
:where(.entry-content) img { margin-bottom: 0.8rem; }

/* --- Site-wide professional pullquote styling (safe, non-destructive) --- */

/* 1) Gutenberg Pullquote block */
:where(.entry-content) .wp-block-pullquote {
  font-family: var(--if-pq-font);
  font-style: italic;
  color: var(--if-pq-text);
  background: var(--if-pq-bg);
  padding: 14px 16px;
  border-left: 4px solid var(--if-pq-accent);
  box-shadow: 0 6px 18px rgba(26,115,232,.08); /* light, tasteful */
  max-width: 640px;
  margin: 1rem auto;
}
:where(.entry-content) .wp-block-pullquote blockquote { margin: 0; }
:where(.entry-content) .wp-block-pullquote p {
  font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
  line-height: 1.6;
  margin: 0;
}
:where(.entry-content) .wp-block-pullquote cite,
:where(.entry-content) .wp-block-pullquote footer {
  display: block;
  margin-top: .4rem;
  font-style: normal;
  font-size: .9em;
  color: var(--if-pq-cite);
}

/* Alignment variants for Gutenberg pullquote */
:where(.entry-content) .wp-block-pullquote.alignleft {
  float: left; margin: .25rem 1rem 1rem 0; max-width: 420px;
}
:where(.entry-content) .wp-block-pullquote.alignright {
  float: right; margin: .25rem 0 1rem 1rem; max-width: 420px;
}
@media (max-width: 960px) {
  :where(.entry-content) .wp-block-pullquote.alignleft,
  :where(.entry-content) .wp-block-pullquote.alignright {
    float: none; margin: 0 0 1rem 0; max-width: 100%;
  }
}

/* 2) Your custom .fx-pullquote (keeps color/look, upgrades font & sizing) */
.fx-pullquote {
  font-family: var(--if-pq-font);
  font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: var(--if-pq-text);
  background: var(--if-pq-bg);
  border-left-color: var(--if-pq-accent);
  box-shadow: 0 6px 18px rgba(26,115,232,.08);
}
.fx-pullquote .source,
.fx-pullquote cite {
  display: block;
  margin-top: .35rem;
  font-style: normal;
  font-size: .9em;
  color: var(--if-pq-cite);
}

/* 3) Classic <blockquote> fallback inside content */
:where(.entry-content) blockquote:not(.wp-block-pullquote) {
  font-family: var(--if-pq-font);
  font-style: italic;
  color: var(--if-pq-text);
  background: var(--if-pq-bg);
  border-left: 4px solid var(--if-pq-accent);
  padding: 12px 16px;
  margin: 1rem 0;
}
:where(.entry-content) blockquote p { margin: 0; line-height: 1.6; }
:where(.entry-content) blockquote cite { display:block; margin-top:.35rem; font-style:normal; color:var(--if-pq-cite); }

/* Ensure floats don’t collide with headings/toggles */
:where(.entry-content) h1,
:where(.entry-content) h2,
:where(.entry-content) h3,
:where(.entry-content) details,
:where(.entry-content) .fx-infobox,
:where(.entry-content) .fx-callout { clear: both; }
/* ===== Unified gallery styles (works for both legacy .image-gallery and reusable .fx-gallery) ===== */

/* Base selector: support legacy article galleries + reusable component */
.mag-article .image-gallery,
.org-article .image-gallery,
.fx-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 1rem 0;
  clear: both; /* stay clear of floats/sidebars */
}

@media (min-width: 720px) {
  .mag-article .image-gallery,
  .org-article .image-gallery,
  .fx-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.mag-article .image-gallery figure,
.org-article .image-gallery figure,
.fx-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.mag-article .image-gallery img,
.org-article .image-gallery img,
.fx-gallery img {
  display: block;
  width: 100%;
  height: auto; /* preserve aspect */
}

.mag-article .image-gallery figcaption,
.org-article .image-gallery figcaption,
.fx-gallery figcaption {
  font-size: .9rem;
  line-height: 1.4;
  padding: 8px 10px;
  color: #333;
  background: #f8f8f8;
  border-top: 1px solid #eee;
}

/* Optional: centre the figure card on small screens when only one column */
@media (max-width: 719.98px) {
  .mag-article .image-gallery figure,
  .org-article .image-gallery figure,
  .fx-gallery figure {
    max-width: 520px;
    justify-self: center;
    width: 100%;
  }
}

/* Ensure gallery images don’t inherit the site-wide float wrap */
.mag-article .image-gallery .alignleft,
.mag-article .image-gallery .alignright,
.mag-article .image-gallery figure img,
.org-article .image-gallery .alignleft,
.org-article .image-gallery .alignright,
.org-article .image-gallery figure img,
.fx-gallery .alignleft,
.fx-gallery .alignright,
.fx-gallery figure img {
  float: none !important;
}
/* ===== Key Facts ribbon (grid-based, float-free, sidebar-safe) ===== */
.fx-keyfacts {
  margin: 0 0 1rem 0;
  border: 1px solid #dfe6f3;
  border-radius: 12px;
  background:
    radial-gradient(1200px 400px at -10% -30%, rgba(15,79,168,0.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  overflow: hidden;
}

.fx-keyfacts .fx-kf-title {
  margin: 0;
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(135deg, #0b3b7d, #0f4fa8);
}

.fx-keyfacts .fx-kf-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
}

@media (min-width: 720px) {
  .fx-keyfacts .fx-kf-list {
    grid-template-columns: repeat(2, minmax(260px, 1fr)); /* neat two-column */
    gap: 12px 18px;
  }
}
@media (min-width: 1080px) {
  .fx-keyfacts .fx-kf-list {
    grid-template-columns: repeat(3, minmax(260px, 1fr)); /* three columns on wide */
  }
}

.fx-keyfacts .fx-kf-item {
  display: grid;
  grid-template-columns: 120px 1fr; /* label column + value */
  align-items: start;
  gap: 8px 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #eef3fb;
  border-radius: 8px;
}

.fx-keyfacts .fx-kf-label {
  font-weight: 700;
  color: #0b3b7d;
}
.fx-keyfacts .fx-kf-value {
  color: #222;
}

/* Small screens: stack label/value vertically */
@media (max-width: 519.98px) {
  .fx-keyfacts .fx-kf-item {
    grid-template-columns: 1fr;
  }
}

/* Nice link styling inside the ribbon (if any) */
.fx-keyfacts a { color: #0f4fa8; text-decoration: underline; }
.fx-keyfacts a:hover { text-decoration-thickness: 2px; }
/* ================================
   Economy section — scoped styles
   Targets:
     #economy-landing
     #economy-girmit
     #economy-leasehold
     #economy-tradeunions
     #economy-retail
     #economy-professionals
     #economy-remittances
     #economy-contemporary
   ================================ */

/* Banner + lead */
#economy-landing .fx-banner,
#economy-girmit .fx-banner,
#economy-leasehold .fx-banner,
#economy-tradeunions .fx-banner,
#economy-retail .fx-banner,
#economy-professionals .fx-banner,
#economy-remittances .fx-banner,
#economy-contemporary .fx-banner {
  margin-bottom: 1rem;
}

#economy-landing .lead,
#economy-girmit .lead,
#economy-leasehold .lead,
#economy-tradeunions .lead,
#economy-retail .lead,
#economy-professionals .lead,
#economy-remittances .lead,
#economy-contemporary .lead {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .95;
}

/* Cards */
#economy-landing .fx-card,
#economy-girmit .fx-card,
#economy-leasehold .fx-card,
#economy-tradeunions .fx-card,
#economy-retail .fx-card,
#economy-professionals .fx-card,
#economy-remittances .fx-card,
#economy-contemporary .fx-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 1rem 1rem .5rem;
  margin: 1rem 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Ribbon (cards grid) */
#economy-landing .fx-ribbon,
#economy-girmit .fx-ribbon,
#economy-leasehold .fx-ribbon,
#economy-tradeunions .fx-ribbon,
#economy-retail .fx-ribbon,
#economy-professionals .fx-ribbon,
#economy-remittances .fx-ribbon,
#economy-contemporary .fx-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 1.25rem 0;
  clear: both; /* avoid float collisions with sidebars */
}

#economy-landing .fx-ribbon-card,
#economy-girmit .fx-ribbon-card,
#economy-leasehold .fx-ribbon-card,
#economy-tradeunions .fx-ribbon-card,
#economy-retail .fx-ribbon-card,
#economy-professionals .fx-ribbon-card,
#economy-remittances .fx-ribbon-card,
#economy-contemporary .fx-ribbon-card {
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
  padding: .85rem 1rem;
}

#economy-landing .fx-ribbon-card header,
#economy-girmit .fx-ribbon-card header,
#economy-leasehold .fx-ribbon-card header,
#economy-tradeunions .fx-ribbon-card header,
#economy-retail .fx-ribbon-card header,
#economy-professionals .fx-ribbon-card header,
#economy-remittances .fx-ribbon-card header,
#economy-contemporary .fx-ribbon-card header {
  background: linear-gradient(90deg, #003366, #004d99);
  color: #fff;
  padding: .4rem .6rem;
  margin: -0.85rem -1rem .6rem;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: .95rem;
}
#economy-landing .fx-ribbon-card header a { color:#fff; text-decoration:none; }

/* Timeline */
#economy-landing .fx-timeline,
#economy-girmit .fx-timeline,
#economy-leasehold .fx-timeline,
#economy-tradeunions .fx-timeline,
#economy-retail .fx-timeline,
#economy-professionals .fx-timeline,
#economy-remittances .fx-timeline,
#economy-contemporary .fx-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 1.5rem 0;
  clear: both;
}

#economy-landing .fx-tl-card,
#economy-girmit .fx-tl-card,
#economy-leasehold .fx-tl-card,
#economy-tradeunions .fx-tl-card,
#economy-retail .fx-tl-card,
#economy-professionals .fx-tl-card,
#economy-remittances .fx-tl-card,
#economy-contemporary .fx-tl-card {
  border: 1px solid rgba(0,0,0,.1);
  border-left: 4px solid #004d99;
  border-radius: 6px;
  background: #fff;
  padding: .75rem .9rem;
}

/* Pull quotes */
#economy-landing .pullquote,
#economy-girmit .pullquote,
#economy-leasehold .pullquote,
#economy-tradeunions .pullquote,
#economy-retail .pullquote,
#economy-professionals .pullquote,
#economy-remittances .pullquote,
#economy-contemporary .pullquote {
  font-style: italic;
  border-left: 4px solid #004d99;
  padding: .5rem .9rem;
  margin: 1rem 0;
  background: #FFF2CC;
}

/* Toggles */
#economy-landing details,
#economy-girmit details,
#economy-leasehold details,
#economy-tradeunions details,
#economy-retail details,
#economy-professionals details,
#economy-remittances details,
#economy-contemporary details {
  margin: .75rem 0;
  border: 1px dashed rgba(0,0,0,.2);
  border-radius: 6px;
  padding: .25rem .6rem;
  background: #fcfdff;
}
#economy-landing summary,
#economy-girmit summary,
#economy-leasehold summary,
#economy-tradeunions summary,
#economy-retail summary,
#economy-professionals summary,
#economy-remittances summary,
#economy-contemporary summary {
  cursor: pointer;
  font-weight: 700;
}
#economy-landing details[open],
#economy-girmit details[open],
#economy-leasehold details[open],
#economy-tradeunions details[open],
#economy-retail details[open],
#economy-professionals details[open],
#economy-remittances details[open],
#economy-contemporary details[open] {
  background: #f8fbff;
}

/* Compact right-aligned images (133×166 standard) */
#economy-landing figure.alignright,
#economy-girmit figure.alignright,
#economy-leasehold figure.alignright,
#economy-tradeunions figure.alignright,
#economy-retail figure.alignright,
#economy-professionals figure.alignright,
#economy-remittances figure.alignright,
#economy-contemporary figure.alignright {
  float: right;
  margin: .25rem 0 .75rem .9rem;
  max-width: 160px;
}
#economy-landing figure.alignright img,
#economy-girmit figure.alignright img,
#economy-leasehold figure.alignright img,
#economy-tradeunions figure.alignright img,
#economy-retail figure.alignright img,
#economy-professionals figure.alignright img,
#economy-remittances figure.alignright img,
#economy-contemporary figure.alignright img {
  display: block;
  width: 133px;
  height: 166px;
  object-fit: cover;
  border-radius: 4px;
}
#economy-landing figure.alignright figcaption,
#economy-girmit figure.alignright figcaption,
#economy-leasehold figure.alignright figcaption,
#economy-tradeunions figure.alignright figcaption,
#economy-retail figure.alignright figcaption,
#economy-professionals figure.alignright figcaption,
#economy-remittances figure.alignright figcaption,
#economy-contemporary figure.alignright figcaption {
  font-size: .8rem;
  opacity: .8;
  margin-top: .35rem;
}

/* Responsive */
@media (max-width: 860px) {
  #economy-landing figure.alignright,
  #economy-girmit figure.alignright,
  #economy-leasehold figure.alignright,
  #economy-tradeunions figure.alignright,
  #economy-retail figure.alignright,
  #economy-professionals figure.alignright,
  #economy-remittances figure.alignright,
  #economy-contemporary figure.alignright {
    float: none;
    margin: .5rem 0;
    max-width: 100%;
    text-align: center;
  }
  #economy-landing figure.alignright img,
  #economy-girmit figure.alignright img,
  #economy-leasehold figure.alignright img,
  #economy-tradeunions figure.alignright img,
  #economy-retail figure.alignright img,
  #economy-professionals figure.alignright img,
  #economy-remittances figure.alignright img,
  #economy-contemporary figure.alignright img {
    margin: 0 auto;
  }
}

/* Hover affordance on header links */
#economy-landing .fx-ribbon-card header a:hover,
#economy-girmit .fx-ribbon-card header a:hover,
#economy-leasehold .fx-ribbon-card header a:hover,
#economy-tradeunions .fx-ribbon-card header a:hover,
#economy-retail .fx-ribbon-card header a:hover,
#economy-professionals .fx-ribbon-card header a:hover,
#economy-remittances .fx-ribbon-card header a:hover,
#economy-contemporary .fx-ribbon-card header a:hover {
  text-decoration: underline;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}
/* ================================
   Education section — scoped styles (merged)
   Targets:
     #education-landing
     #education-community
     #education-teachers-union
     #education-arts-saman
     #education-higher
     #education-future
     #leaders-pratapchand
     #education-influential
   ================================ */

/* Banner / Lead */
#education-landing .fx-banner,
#education-community .fx-banner,
#education-teachers-union .fx-banner,
#education-arts-saman .fx-banner,
#education-higher .fx-banner,
#education-future .fx-banner,
#leaders-pratapchand .fx-banner,
#education-influential .fx-banner {
  margin-bottom: 1rem;
}

#education-landing .lead,
#education-community .lead,
#education-teachers-union .lead,
#education-arts-saman .lead,
#education-higher .lead,
#education-future .lead,
#leaders-pratapchand .lead,
#education-influential .lead {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.95;
}

/* Cards */
#education-landing .fx-card,
#education-community .fx-card,
#education-teachers-union .fx-card,
#education-arts-saman .fx-card,
#education-higher .fx-card,
#education-future .fx-card,
#leaders-pratapchand .fx-card,
#education-influential .fx-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 1rem 1rem 0.5rem;
  margin: 1rem 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Ribbon (cards grid) */
#education-landing .fx-ribbon,
#education-community .fx-ribbon,
#education-teachers-union .fx-ribbon,
#education-arts-saman .fx-ribbon,
#education-higher .fx-ribbon,
#education-future .fx-ribbon,
#leaders-pratapchand .fx-ribbon,
#education-influential .fx-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 1.25rem 0;
  clear: both; /* prevents float collision with sidebars */
}

#education-landing .fx-ribbon-card,
#education-community .fx-ribbon-card,
#education-teachers-union .fx-ribbon-card,
#education-arts-saman .fx-ribbon-card,
#education-higher .fx-ribbon-card,
#education-future .fx-ribbon-card,
#leaders-pratapchand .fx-ribbon-card,
#education-influential .fx-ribbon-card {
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
  padding: .85rem 1rem;
}

#education-landing .fx-ribbon-card header,
#education-community .fx-ribbon-card header,
#education-teachers-union .fx-ribbon-card header,
#education-arts-saman .fx-ribbon-card header,
#education-higher .fx-ribbon-card header,
#education-future .fx-ribbon-card header,
#leaders-pratapchand .fx-ribbon-card header,
#education-influential .fx-ribbon-card header {
  background: linear-gradient(90deg, #004080, #0056b3);
  color: #fff;
  padding: .4rem .6rem;
  margin: -0.85rem -1rem .6rem;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: .95rem;
}
#education-landing .fx-ribbon-card header a,
#education-community .fx-ribbon-card header a,
#education-teachers-union .fx-ribbon-card header a,
#education-arts-saman .fx-ribbon-card header a,
#education-higher .fx-ribbon-card header a,
#education-future .fx-ribbon-card header a,
#leaders-pratapchand .fx-ribbon-card header a,
#education-influential .fx-ribbon-card header a { color: #fff; text-decoration: none; }

/* Timeline */
#education-landing .fx-timeline,
#education-community .fx-timeline,
#education-teachers-union .fx-timeline,
#education-arts-saman .fx-timeline,
#education-higher .fx-timeline,
#education-future .fx-timeline,
#leaders-pratapchand .fx-timeline,
#education-influential .fx-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 1.5rem 0;
  clear: both;
}

#education-landing .fx-tl-card,
#education-community .fx-tl-card,
#education-teachers-union .fx-tl-card,
#education-arts-saman .fx-tl-card,
#education-higher .fx-tl-card,
#education-future .fx-tl-card,
#leaders-pratapchand .fx-tl-card,
#education-influential .fx-tl-card {
  border: 1px solid rgba(0,0,0,.1);
  border-left: 4px solid #004080;
  border-radius: 6px;
  background: #FFF2CC;
  padding: .75rem .9rem;
}

/* Pull quotes */
#education-landing .pullquote,
#education-community .pullquote,
#education-teachers-union .pullquote,
#education-arts-saman .pullquote,
#education-higher .pullquote,
#education-future .pullquote,
#leaders-pratapchand .pullquote,
#education-influential .pullquote {
  font-style: italic;
  border-left: 4px solid #0056b3;
  padding: .5rem .9rem;
  margin: 1rem 0;
  background: #FFF9DB;
}

/* Details / Summary (toggles) */
#education-landing details,
#education-community details,
#education-teachers-union details,
#education-arts-saman details,
#education-higher details,
#education-future details,
#leaders-pratapchand details,
#education-influential details {
  margin: .75rem 0;
  border: 1px dashed rgba(0,0,0,.2);
  border-radius: 6px;
  padding: .25rem .6rem;
  background: #fcfdff;
}
#education-landing summary,
#education-community summary,
#education-teachers-union summary,
#education-arts-saman summary,
#education-higher summary,
#education-future summary,
#leaders-pratapchand summary,
#education-influential summary {
  cursor: pointer;
  font-weight: 700;
}
#education-landing details[open],
#education-community details[open],
#education-teachers-union details[open],
#education-arts-saman details[open],
#education-higher details[open],
#education-future details[open],
#leaders-pratapchand details[open],
#education-influential details[open] {
  background: #f8fbff;
}

/* Compact right-aligned images (133×166 standard) */
#education-landing figure.alignright,
#education-community figure.alignright,
#education-teachers-union figure.alignright,
#education-arts-saman figure.alignright,
#education-higher figure.alignright,
#education-future figure.alignright,
#leaders-pratapchand figure.alignright,
#education-influential figure.alignright {
  float: right;
  margin: .25rem 0 .75rem .9rem;
  max-width: 160px;
}
#education-landing figure.alignright img,
#education-community figure.alignright img,
#education-teachers-union figure.alignright img,
#education-arts-saman figure.alignright img,
#education-higher figure.alignright img,
#education-future figure.alignright img,
#leaders-pratapchand figure.alignright img,
#education-influential figure.alignright img {
  display: block;
  width: 133px;
  height: 166px;
  object-fit: cover;
  border-radius: 4px;
}
#education-landing figure.alignright figcaption,
#education-community figure.alignright figcaption,
#education-teachers-union figure.alignright figcaption,
#education-arts-saman figure.alignright figcaption,
#education-higher figure.alignright figcaption,
#education-future figure.alignright figcaption,
#leaders-pratapchand figure.alignright figcaption,
#education-influential figure.alignright figcaption {
  font-size: .8rem;
  opacity: .8;
  margin-top: .35rem;
}

/* Responsive: avoid clashes with sidebars on narrow screens */
@media (max-width: 860px) {
  #education-landing figure.alignright,
  #education-community figure.alignright,
  #education-teachers-union figure.alignright,
  #education-arts-saman figure.alignright,
  #education-higher figure.alignright,
  #education-future figure.alignright,
  #leaders-pratapchand figure.alignright,
  #education-influential figure.alignright {
    float: none;
    margin: .5rem 0;
    max-width: 100%;
    text-align: center;
  }
  #education-landing figure.alignright img,
  #education-community figure.alignright img,
  #education-teachers-union figure.alignright img,
  #education-arts-saman figure.alignright img,
  #education-higher figure.alignright img,
  #education-future figure.alignright img,
  #leaders-pratapchand figure.alignright img,
  #education-influential figure.alignright img {
    margin: 0 auto;
  }
}

/* Nice links inside header cards */
#education-landing .fx-ribbon-card header a:hover,
#education-community .fx-ribbon-card header a:hover,
#education-teachers-union .fx-ribbon-card header a:hover,
#education-arts-saman .fx-ribbon-card header a:hover,
#education-higher .fx-ribbon-card header a:hover,
#education-future .fx-ribbon-card header a:hover,
#leaders-pratapchand .fx-ribbon-card header a:hover,
#education-influential .fx-ribbon-card header a:hover {
  text-decoration: underline;
}

/* Optional: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}
/* ================================
   Home Page — Two-Column Ribbon Layout
   ================================ */

#home-landing .fx-banner {
  margin-bottom: 1rem;
}
#home-landing .lead {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .95;
}

/* Full-width Blog hero keeps its style; only tiles below */
/* CHANGED: force exactly 2 columns */
#home-landing .fx-ribbon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1.25rem 0;
  clear: both; /* avoid sidebar float issues */
}

#home-landing .fx-ribbon-card {
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
  padding: .85rem 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 0; /* NEW: prevent overflow from breaking grid */
}
#home-landing .fx-ribbon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(2,6,23,.12);
}

/* Header gradient (matches Economy style) */
#home-landing .fx-ribbon-card header {
  background: linear-gradient(90deg, #003366, #004d99);
  color: #fff;
  padding: .45rem .65rem;
  margin: -0.85rem -1rem .6rem;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: .95rem;
}
#home-landing .fx-ribbon-card header a {
  color: #fff;
  text-decoration: none;
}
#home-landing .fx-ribbon-card header a:hover {
  text-decoration: underline;
}

/* Image band inside each tile */
#home-landing .thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: #e8ecf2 center/cover no-repeat;
  border-radius: 6px;
  margin: .25rem 0 .6rem;
  border: 1px solid rgba(0,0,0,.05);
}

/* Responsive: two columns on desktop, one on small screens */
@media (max-width: 720px) {
  #home-landing .fx-ribbon {
    grid-template-columns: 1fr;
  }
}
/* ================================
   History Landing — same look as Home
   ================================ */

#history-landing .fx-banner {
  margin-bottom: 1rem;
}
#history-landing .lead {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .95;
}

/* Ribbon grid (matches Home) */
/* CHANGED: force exactly 2 columns */
#history-landing .fx-ribbon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 1.25rem 0;
  clear: both; /* avoid sidebar float issues */
}

/* Tile card (matches Home) */
#history-landing .fx-ribbon-card {
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
  padding: .85rem 1rem;
  box-shadow: 0 1px 2px rgba(2,6,23,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 0; /* NEW: prevent overflow from breaking grid */
}
#history-landing .fx-ribbon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(2,6,23,.12);
}

/* Header gradient (same as Home/Economy) */
#history-landing .fx-ribbon-card header {
  background: linear-gradient(90deg, #003366, #004d99);
  color: #fff;
  padding: .45rem .65rem;
  margin: -0.85rem -1rem .6rem;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: .95rem;
}
#history-landing .fx-ribbon-card header a {
  color: #fff;
  text-decoration: none;
}
#history-landing .fx-ribbon-card header a:hover {
  text-decoration: underline;
}

/* Optional: maroon header variant for crisis tiles */
#history-landing .fx-ribbon-card.maroon header {
  background: linear-gradient(90deg, #7a0026, #a4163a);
}

/* Pull quote (same feel as your site) */
#history-landing .pullquote {
  font-style: italic;
  border-left: 4px solid #b24a2c;
  background: #fff9f3;
  padding: .75rem 1rem;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Mobile: stack to one column */
 
/* === FINAL: Two-column tiles for Home & History (desktop), stack on mobile === */
#home-landing .fx-ribbon,
#history-landing .fx-ribbon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* exactly two columns */
  gap: 14px;
  margin: 1.25rem 0;
  clear: both;
}

#home-landing .fx-ribbon-card,
#history-landing .fx-ribbon-card {
  min-width: 0; /* prevents long content from forcing single column */
}

/* Mobile: one column */
@media (max-width: 720px) {
  #home-landing .fx-ribbon,
  #history-landing .fx-ribbon {
    grid-template-columns: 1fr;
  }
}