/* ==========================================================================
   Newsroom listing (measured on live nafas.com/newsroom, 2026-10-29)
   Breakpoints: desktop >= 1440, tablet 810-1439.98, phone <= 809.98.
   - Content column: padding 100 60 0 (phone 100 40 0), gap 40 (tablet / phone 20); 80px to the footer (page frame gap).
   - Featured card: row 520px tall, photo 56% + text panel (desktop); column with a 316px (tablet) / 164px (phone) photo.
   - Grid: 3 columns (phone 2), gap 50px 10px (desktop) / 32px; photos 261 / 178 / 132px tall, cover 50% 50%.
   - Load appear: the "Newsroom" title rises 50px and fades in, 0.6s cubic-bezier(.44,0,.56,1), clipped by its
     overflow:hidden parent (js/10-listing.js adds .is-in). No hover or press states on live (cursor pointer only).
   - Deviations from live (Danny, 2026-10-30; tools/AGENT-BRIEF-NEWSROOM.md): type on the site's SF Pro scale (same as
     /business, business pricing, EcoFlow, How it works), greys #616161, one featured date, featured text aligned with
     the photo on tablet and phone. Values per breakpoint (desktop / tablet / phone):
       page title 52 / 42 / 28, 1.15, Display Regular, green    lead 24 / 22 / 18, 1.3, Display Regular, #616161
       featured title 40 / 32 / 25, 1.15, Display Regular        card title 28 / 24 / 18, 1.25, Display Regular
       body (excerpt) 20 / 18 / 16, 1.5, Display Regular         label (FEATURED, date, bylines) 18 / 16 / 14, 1.3,
                                                                 SF Pro Text Medium 500, #616161
   ========================================================================== */

.nf-news {
  --nf-news-disp: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  --nf-news-label: "SFProText-Medium", "SF Pro Text", "Nafas Inter", sans-serif;
}

/* ---------- base (desktop >= 1440) ---------- */
.nf-news {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px;
  width: 100%; position: relative; overflow: hidden; margin-bottom: 80px;
}
.nf-news__content {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 40px;
  width: 100%; max-width: 100%; padding: 100px 60px 0; border-radius: 18px; position: relative;
}
.nf-news__head {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
  width: 100%; position: relative; overflow: hidden;
}
.nf-news__head-inner {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  width: 100%; padding: 20px 0; position: relative; overflow: hidden;
}

/* text boxes (Framer RichTextContainer) */
.nf-news__title-box, .nf-news__lead-box, .nf-news__text-box, .nf-news__by-word, .nf-news__by-name {
  display: flex; flex-direction: column; justify-content: flex-start; flex: 0 0 auto; position: relative;
}
.nf-news__text-box { width: 100%; }
.nf-news__text-box > *, .nf-news__by-name > * { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.nf-news__title-box { width: auto; }
.nf-news__lead-box { width: auto; }
.nf-news__by-word { width: auto; }
.nf-news__by-word > * { white-space: pre; }
.nf-news__by-name { flex: 1 0 0px; width: 1px; }

.nf-news__title {
  white-space: pre;
  font-family: var(--nf-news-disp); font-weight: 400; font-size: 52px; line-height: 1.15; letter-spacing: normal;
  color: var(--nf-green); text-align: center;
}
.nf-news__lead {
  white-space: pre;
  font-family: var(--nf-news-disp); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: normal;
  color: var(--nf-grey-61); text-align: center;
}

/* load appear (title only, as live) */
.nf-news__title-box[data-news-appear] {
  opacity: 0.001; transform: translateY(50px);
  transition: opacity 0.6s cubic-bezier(0.44, 0, 0.56, 1), transform 0.6s cubic-bezier(0.44, 0, 0.56, 1);
}
.nf-news__title-box[data-news-appear].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nf-news__title-box[data-news-appear] { opacity: 1; transform: none; transition: none; }
}

.nf-news__rule {
  flex: 0 0 auto; width: 100%; height: 1px; background-color: var(--nf-green); position: relative; overflow: hidden;
}

/* featured card */
.nf-news__featured-wrap {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
  width: 100%; position: relative;
}
.nf-news__featured {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0;
  width: 100%; height: 520px; position: relative; text-decoration: none; cursor: pointer;
}
.nf-news__featured-media { flex: 0 0 auto; width: 56%; height: 100%; position: relative; }
.nf-news__img { position: absolute; inset: 0; }
.nf-news__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.nf-news__featured-body {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 40px; position: relative; overflow: hidden;
  border-radius: 18px 0 0 18px; will-change: transform;
}
.nf-news__featured-top, .nf-news__featured-meta, .nf-news__meta-stack, .nf-news__date-row {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  flex: 0 0 auto; width: 100%; padding: 0; position: relative; overflow: clip;
}
/* labels: FEATURED, date, "By Nafas Middle East" (featured and cards) */
.nf-news__label, .nf-news__meta, .nf-news__card-by {
  font-family: var(--nf-news-label); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: normal;
  color: var(--nf-grey-61); text-align: left;
}
.nf-news__featured-title {
  font-family: var(--nf-news-disp); font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: normal;
  color: var(--nf-black); text-align: start; text-wrap: balance;
}
.nf-news__excerpt {
  font-family: var(--nf-news-disp); font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: normal;
  color: var(--nf-black); text-align: left; text-wrap: pretty;
}
/* "By" + "Nafas Middle East" (two text nodes on live) flow as one line of text, so a narrow phone card wraps the
   byline like a sentence instead of leaving "By" beside a two-line name; the markup's space replaces live's 4px gap */
.nf-news__by {
  display: block; flex: 0 0 auto; width: 100%; padding: 0; position: relative; overflow: hidden;
  text-align: left; text-wrap: balance;
}
.nf-news__by > .nf-news__by-word, .nf-news__by > .nf-news__by-name, .nf-news__by p { display: inline; width: auto; }

/* live anchors keep the browser link colour (invisible: no border, every text sets its own colour) */
.nf-news__featured, .nf-news__card { color: rgb(0, 0, 238); }

/* grid of article cards */
.nf-news__grid {
  display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: min-content;
  justify-content: center; gap: 50px 10px; flex: 0 0 auto; width: 100%; padding: 0 0 100px; position: relative;
}
.nf-news__card {
  display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center; align-content: center; gap: 0;
  place-self: start; width: 100%; padding: 0; border-radius: 18px; position: relative;
  text-decoration: none; cursor: pointer;
}
.nf-news__card-media { flex: 0 0 auto; width: 100%; max-width: 100%; height: 261px; position: relative; }
.nf-news__card-body {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px;
  flex: 0 0 auto; width: 100%; padding: 20px 80px 0 0; position: relative;
}
.nf-news__card-summary {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px;
  flex: 0 0 auto; width: 100%; padding: 0; position: relative; overflow: hidden;
}
.nf-news__card-title {
  font-family: var(--nf-news-disp); font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: normal;
  color: var(--nf-black); text-align: start; text-wrap: balance;
}

/* ---------- tablet (810 - 1439.98) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-news__content { gap: 20px; }
  .nf-news__title-box { width: 100%; }
  .nf-news__title { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-size: 42px; text-align: left; }
  .nf-news__lead-box { width: 100%; }
  .nf-news__lead {
    white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-size: 22px; text-align: left;
    text-wrap: pretty;
  }
  .nf-news__featured { flex-direction: column; height: auto; }
  .nf-news__featured-media { width: 100%; height: 316px; }
  /* text starts at the photo's left edge (live indents it 40px) */
  .nf-news__featured-body { flex: 0 0 auto; justify-content: flex-start; gap: 40px; width: 100%; height: auto; padding: 32px 0 40px; }
  .nf-news__featured-title { font-size: 32px; }
  .nf-news__excerpt { font-size: 18px; }
  .nf-news__label, .nf-news__meta, .nf-news__card-by { font-size: 16px; }
  .nf-news__grid { gap: 32px; }
  .nf-news__card-media { height: 178px; }
  .nf-news__card-body { padding: 20px 0 0; }
  .nf-news__card-title { font-size: 24px; }
}

/* ---------- phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-news__content { gap: 20px; padding: 100px 40px 0; }
  .nf-news__title { font-size: 28px; }
  .nf-news__lead-box { width: 100%; }
  .nf-news__lead {
    white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; font-size: 18px; text-align: left;
    text-wrap: pretty;
  }
  .nf-news__featured { flex-direction: column; height: auto; }
  .nf-news__featured-media { width: 100%; height: 164px; }
  /* text starts at the photo's left edge (live indents it 20px: text x 60, photo x 40) */
  .nf-news__featured-body {
    flex: 0 0 auto; justify-content: flex-start; gap: 20px; width: 100%; height: auto; padding: 20px 0;
    border-radius: 18px 18px 0 0;
  }
  .nf-news__meta-stack { gap: 2px; }
  .nf-news__label, .nf-news__meta, .nf-news__card-by { font-size: 14px; }
  .nf-news__featured-title { font-size: 25px; }
  .nf-news__excerpt { font-size: 16px; }
  .nf-news__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 32px; }
  .nf-news__card-media { height: 132px; }
  .nf-news__card-body { gap: 12px; padding: 12px 0 0; }
  .nf-news__card-title { font-size: 18px; text-align: left; }
}

/* Small phones (Danny, 2026-10-30): two cards side by side were ~139px wide at 390 (byline on two lines, titles on five),
   so below 480px the cards stack, one per row. */
@media (max-width: 479.98px) {
  .nf-news__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* Phone: the grid's 100px bottom padding plus the section's 80px margin left ~180px blank above the footer; 60px, like the
   article pages (Danny, 2026-10-30). */
@media (max-width: 809.98px) {
  .nf-news__grid { padding-bottom: 0; }
  .nf-news { margin-bottom: 60px; }
}