/* ===============================
   Schoodic Prototype Styles
   Scoped to .nf-* classes
   =============================== */

/* Grid scaffold */
.nf-grid 
    {
    display: grid;
    grid-template-columns: 1fr 320px; /* content + right rail */
    gap: 24px;
    align-items: start;
    }

/* Ensure the article itself isn't capped */
.nf-article { max-width: none; }

/* Global rail card rhythm */
.nf-rail .tip-box,
.nf-rail .card,
#schoodic-travel-resources 
    { 
    margin-bottom: 1rem;
    }

/* Tip box typography inside the rail */
.nf-rail .tip-box h3,
.nf-rail .tip-box h4,
.nf-rail .tip-box p,
.tip-box a,
.nf-rail .tip-box ul.circle_style_list li a,
.jtt-newsfront .nf-rail .tip-box a.link_no_decoration ,
.jtt-newsfront .nf-rail .tip-box a 
    {
    font-size: .9rem!important;
    margin: 0 0 .35rem 0;
    }

    /* any anchor in a rail tip box */
.nf-rail .tip-box a 
    { 
    font-size: .9rem!important;
    line-height: 1.4;
    }

#schoodic-travel-resources + ul.circle_style_list li a.link_no_decoration 
    {
    font-size: 0.9rem;
    line-height: 1.4;
    }


/* if any are Bootstrap buttons, they keep their own size unless you override */
.nf-rail .tip-box a { font-size: 0.875rem; }


.nf-rail .tip-box 
    {
    font-size: 0.9rem!important;
    line-height: 1.5;
    }

/* Make “bullet-like” lists inside tip boxes tidy */
.nf-rail .tip-box ul 
    { 
    margin: 0; 
    padding-left: 1rem; 
    }

.nf-rail .tip-box li { margin: .25rem 0; }

.nf-card figcaption 
    {
    font-size: 0.88rem!important;
    color: #555;
    line-height: 1.4;
    }


/* Links won’t spill the layout */
.nf-rail .tip-box a { word-break: break-word; }

/* Optional: unify rail cards (if your tip box doesn’t already) */
.nf-rail .tip-box, 
.nf-rail .card 
    {
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

/* Mobile legibility bump */
@media (max-width: 700px) { .nf-rail .tip-box { font-size: 1rem; } }


/* was global on the id; scope it to the rail */
.nf-rail #schoodic-travel-resources 
    { 
    font-size: 0.9rem; 
    line-height: 1.4; 
    }

/* normalize main-column headings (same size for Plan & More) */
#schoodic-plan-resources,
#schoodic-travel-resources 
    {
    font-size: 1.125rem;   /* tune to taste */
    font-weight: 700;
    margin: 0 0 .5rem 0;
    }

/* Rail promo card */
.rail-promo 
    { 
    margin-bottom: 1rem; padding: .75rem; border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); background:#fff;
    }

.rail-promo .promo-badge 
    {
    display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.02em;
    background:#f1f3f5; color:#555; border-radius:.35rem; padding:.15rem .4rem; margin-bottom:.35rem;
    }
    
.rail-promo .promo-link { text-decoration:none; color:inherit; display:block; }
.rail-promo img { width:100%; height:auto; aspect-ratio:16/9; border-radius:.35rem; display:block; }
.rail-promo .promo-title { display:block; font-size:1.05rem; margin:.5rem 0 .25rem; }
.rail-promo .promo-text { font-size:.92rem; line-height:1.45; margin:0 0 .5rem; }


#schoodic-travel-resources ul { display: block; }

.nf-full-grid { grid-column: 1 / -1; margin: 2rem 0; }
.nf-full-grid > * { max-width: min(90ch, 100%); margin-inline: auto; }

#schoodic-travel-resources li { margin-bottom: 0.4rem; }

/* Make nf-full truly full width within the article column,
   even if a global rule caps sections/paragraphs */
.jtt-newsfront .nf-article > .nf-full 
    {
    display: block;
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    margin-left: 0;
    margin-right: 0;
    column-count: initial;
    column-width: auto;
    }

/* Keep the narrow reading measure ONLY on multi-column prose */
.jtt-newsfront .nf-article > .article-body 
    {
    max-width: 80ch;
    margin-inline: 0;
    }



@media (max-width: 1100px) {
  .nf-grid {
    grid-template-columns: 1fr;
  }
  .nf-rail {
    order: 2; /* rail moves below article */
  }
}

/* Hero section */
.nf-hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 21/9;
  display: block;
  border-radius: 0.5rem;
}
.nf-title 
    {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 1rem;
    }

.nf-dek {
  font-size: 1.125rem;
  margin-top: 0.5rem;
  color: #444;
}

/* Multi-column article body */
.article-body {
  column-width: 22rem;
  column-gap: 2rem;
  line-height: 1.6;
  hyphens: auto;
  max-width: 80ch;
}
.article-body h2,
.article-body figure {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Wide figures between column groups */
.nf-figure-wide {
  margin: 2rem 0;
}
.nf-figure-wide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
  border-radius: 0.5rem;
}
.nf-figure-wide figcaption {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* Photo grid for visual storytelling */
.nf-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .nf-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .nf-photo-grid {
    grid-template-columns: 1fr;
  }
}
.nf-card img 
    {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0.5rem;
    }

/* Sidebar rail */
.nf-rail 
    {
    position: sticky;
    top: 16px;
    }

.nf-rail .tip-box { margin-bottom: 1.5rem; }

/* Only shrink resource links inside the rail */
.nf-rail ul.circle_style_list li a.link_no_decoration 
    {
    font-size: 0.75rem !important;
    line-height: 1.4;
    }


/* Print adjustments */
@media print 
    {
    .nf-grid { grid-template-columns: 1fr; }
    .nf-rail { display: none;  }

    .article-body 
        {
        column-width: 18rem;
        column-gap: 1.5rem;
        }
    }

@media (max-width: 700px) 
    {
    .nf-rail { position: static; }       /* turn off sticky on small screens */
    .nf-card figcaption { font-size: 1rem; line-height: 1.45; }
    }