/* ============================================================
   YAYASAN NURUL ISHLAH — EDITORIAL PREMIUM V2.1
   Additive stylesheet, loaded AFTER premium-v2.css.
   Public landing page and portal only. No CMS/JS changes.
   ============================================================ */
:root {
  --ni21-ink:#173a2d;
  --ni21-muted:#596d60;
  --ni21-stroke:#e2e7df;
  --ni21-ivory:#f8f7f2;
}
body { text-rendering:optimizeLegibility; }

/* Readable type scale: V2 body labels were too small on real desktops. */
.section-desc,
.about-copy>p:not(.lead),
.hero p,
.contact-section .section-desc { font-size:15px; line-height:1.83; color:var(--ni21-muted); }
.section-heading { font-size:clamp(34px,3.1vw,45px); line-height:1.19; text-wrap:balance; }
.section-header { margin-bottom:30px; }
.eyebrow { font-size:11px; letter-spacing:.115em; }
.content-note { font-size:12px; line-height:1.75; }

/* A consistent editorial cadence, rather than repeated oversized gaps. */
.section { padding-block:86px; }
.about-section { padding-top:108px; padding-bottom:94px; }
.news-section,.gallery-section { padding-block:88px; }
.value-section { padding-block:78px; }
.contact-section { padding-block:88px; }

/* Masthead: align subject, copy and action hierarchy. */
.hero,.hero-grid { min-height:625px; }
.hero-grid { padding-bottom:70px; }
.hero h1 { font-size:clamp(48px,4.45vw,67px); line-height:1.11; text-wrap:balance; }
.hero p { max-width:515px; }
.hero-picture { inset:32px 35px 42px 50.8%; border-radius:4px 4px 48px 4px; }
.hero-caption { line-height:1.45; }
.stats-section { margin-top:-25px; }
.stats-panel { box-shadow:0 14px 36px rgba(22,56,37,.085); }
.stat-details small { font-size:12px; line-height:1.45; }

/* About: less decorative whitespace; clearer vision and mission cards. */
.about-grid { gap:clamp(38px,5.1vw,73px); align-items:center; }
.about-photo-wrap { min-height:420px; }
.about-photo { height:425px; }
.vm-grid { gap:14px; }
.vm-card { padding:23px 22px; }
.vm-card h3 { font-size:16px; }
.vm-card p,.vm-card li { font-size:12.5px; line-height:1.75; }

/* Unit cards: maintain equal perceived heights and meaningful copy. */
.unit-grid { align-items:stretch; gap:18px; }
.unit-card { display:flex; flex-direction:column; min-width:0; }
.unit-image { height:215px; }
.unit-body { display:flex; flex-direction:column; flex:1; padding:27px 22px 25px; }
.unit-body h3 { line-height:1.3; font-size:20px; }
.unit-body .unit-sub { line-height:1.5; }
.unit-body p:last-of-type { font-size:13px; line-height:1.75; }

/* Programs: understated differentiation with readable descriptions. */
.program-card { min-height:220px; padding:33px 25px 30px; }
.program-card h3 { font-size:18px; line-height:1.28; }
.program-card p { font-size:13px; line-height:1.78; }
.program-card:hover { background:#f6f8f3; }
.program-card:nth-child(2n) .program-icon { background:#f3eddf; color:#a47d45; }

/* News: confident picture ratios and comfortable card copy. */
.news-grid { grid-template-columns:1.23fr 1fr 1fr; gap:18px; }
.news-card { min-width:0; border:1px solid var(--ni21-stroke); }
.news-card img,.news-card:first-child img { height:225px; width:100%; object-fit:cover; }
.news-body,.news-card:first-child .news-body { padding:24px 24px 27px; }
.news-card h3,.news-card:first-child h3 { font-size:21px; line-height:1.31; }
.news-card p { font-size:13px; line-height:1.72; }
.news-meta,.news-pill { font-size:12px; }

/* Critical fix: V2's 4/6-column nth-child spans caused a 3-2-1 gallery.
   Six images now fill a reliable, elegant 3x2 image wall. */
.gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; grid-auto-flow:row; align-items:stretch; }
.gallery-grid>.gallery-item,
.gallery-grid>.gallery-item:nth-child(1),
.gallery-grid>.gallery-item:nth-child(2),
.gallery-grid>.gallery-item:nth-child(3),
.gallery-grid>.gallery-item:nth-child(4),
.gallery-grid>.gallery-item:nth-child(5),
.gallery-grid>.gallery-item:nth-child(6) {
  grid-column:auto; grid-row:auto; height:220px; min-width:0;
  aspect-ratio:auto; border-radius:5px;
}
.gallery-grid>.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-grid>.gallery-item:focus-visible { outline:3px solid #c39c5d; outline-offset:3px; }
.gallery-section .content-note { margin-top:16px; }

/* Values, contact and WAFA Love legibility. */
.value-card { padding:28px 29px 28px; }
.value-card h3 { font-size:21px; }
.value-card p { font-size:13px; }
.contact-row strong { font-size:13px; }
.contact-row small { font-size:12px; }
.footer-grid p,.footer-grid a { line-height:1.75; }
.footer-bottom { font-size:12px; }
.footer-bottom .wafa-love-link { font-size:12px; min-height:32px; }
.footer-bottom .wafa-love-link:hover .wafa-name { text-decoration:underline; text-underline-offset:3px; }

/* Portal follows the same typographic clarity. */
.portal-hero p { font-size:15px; }
.portal-toolbar { gap:18px; }
.app-card .app-description { font-size:13px; }
.app-card .app-subtitle { font-size:12px; }
.portal-help { gap:18px; }
.how-card p { font-size:13px; line-height:1.75; }

@media (max-width:1100px) {
  .hero h1 { font-size:clamp(43px,4.8vw,60px); }
  .hero-picture { inset:32px 24px 38px 49%; }
  .section { padding-block:78px; }
  .about-grid { gap:32px; }
  .unit-image { height:175px; }
  .unit-body { padding:25px 17px 20px; }
  .unit-body h3 { font-size:18px; }
  .news-grid { gap:13px; }
}
@media (max-width:720px) {
  .hero,.hero-grid { min-height:0; }
  .hero-grid { padding:43px 0 32px; }
  .hero h1 { font-size:clamp(35px,8.5vw,48px); line-height:1.15; }
  .hero p { font-size:14px; line-height:1.75; }
  .hero-picture { inset:auto; min-height:265px; border-radius:4px 4px 35px 4px; }
  .stats-section { margin-top:0; }
  .stat-details small { font-size:11px; }
  .section,.news-section,.gallery-section,.contact-section { padding-block:65px; }
  .about-section { padding-block:75px; }
  .section-desc,.about-copy>p:not(.lead),.contact-section .section-desc { font-size:14px; }
  .section-heading { font-size:clamp(29px,6.5vw,37px); }
  .about-grid { gap:38px; }
  .about-photo-wrap { min-height:0; }
  .about-photo { height:305px; }
  .vm-card { padding:20px 17px; }
  .vm-card p,.vm-card li { font-size:12px; }
  .unit-image { height:150px; }
  .unit-body { padding:24px 15px 20px; }
  .unit-body h3 { font-size:17px; }
  .unit-body p:last-of-type { font-size:12px; min-height:0; }
  .program-card { padding:25px 20px; min-height:190px; }
  .program-card p { font-size:12px; }
  .news-grid { grid-template-columns:1fr; }
  .news-card,.news-card:first-child { display:grid; grid-template-columns:140px minmax(0,1fr); }
  .news-card img,.news-card:first-child img { height:100%; min-height:190px; }
  .news-body,.news-card:first-child .news-body { padding:17px; }
  .news-card h3,.news-card:first-child h3 { font-size:18px; }
  .news-card p { font-size:12px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .gallery-grid>.gallery-item,.gallery-grid>.gallery-item:nth-child(n) { height:165px; }
  .value-section { padding-block:58px; }
  .value-card { padding:24px 0; }
  .portal-hero p { font-size:14px; }
}
@media (max-width:470px) {
  .hero h1 { font-size:clamp(34px,9vw,39px); }
  .hero .eyebrow { font-size:10px; }
  .unit-image { height:133px; }
  .unit-body { padding:21px 13px 18px; }
  .unit-body h3 { font-size:16px; }
  .unit-body p:last-of-type { font-size:11.5px; }
  .vm-grid { grid-template-columns:1fr; }
  .news-card,.news-card:first-child { grid-template-columns:112px minmax(0,1fr); }
  .news-body,.news-card:first-child .news-body { padding:15px 13px; }
  .news-card h3,.news-card:first-child h3 { font-size:16px; }
  .news-card p { font-size:11.5px; }
  .gallery-grid>.gallery-item,.gallery-grid>.gallery-item:nth-child(n) { height:150px; }
  .gallery-grid { gap:9px; }
  .portal-hero h1 { font-size:38px; }
}
/* Prevent desktop navbar from overflowing at small laptop widths.
   The existing mobile toggle and drawer remain the same JS/HTML. */
@media (min-width:1001px) and (max-width:1240px) {
  .desktop-nav { display:none; }
  .mobile-toggle { display:flex; }
  .header-actions { margin-left:auto; }
}