/* ZIRFLO v0.9.2 — MORE COLUMNS, NOT STRETCHED CARDS
   Wide screens should reveal more stories side-by-side instead of inflating
   the same few cards to fill all available space.
*/

/* Keep the page fluid, but only the CANVAS grows. */
.site-header,
.zirflo-page{
  width:calc(100% - clamp(24px,3vw,96px));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

/* Desktop and wider:
   - automatic number of columns
   - each base column stays around normal card width
   - wider browser = MORE columns
   - dense packing fills holes left by 2-column strong matches
*/
@media (min-width:901px){
  .story-wall{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;
    grid-auto-flow:dense;
    align-items:stretch;
    gap:14px;
  }

  /* Strong / editorial lead: larger field, but never half the ultrawide screen. */
  .story-hero,
  .feature,
  .wide{
    grid-column:span 2!important;
  }

  /* Normal / likely and compact / maybe: one physical column.
     Their HEIGHT and content density distinguish normal from compact. */
  .tall,
  .medium,
  .image-card,
  .quote-card,
  .small{
    grid-column:span 1!important;
  }

  .medium,
  .tall,
  .quote-card{
    min-height:270px;
  }

  .small{
    min-height:190px;
    align-self:start;
  }

  /* Avoid viewport-width typography becoming oversized on 4K/5K monitors. */
  .tall h2,
  .medium h2,
  .wide h2{
    font-size:clamp(1.35rem,1.05rem + .35vw,1.85rem);
  }

  .story-hero h2,
  .feature h2{
    font-size:clamp(2rem,1.5rem + .65vw,3.2rem);
  }

  /* Keep large-image cards editorial rather than banner-like. */
  .story-hero .story-image-live,
  .story-hero .story-image{
    min-height:300px;
  }

  .feature .story-image-live,
  .feature .story-image{
    min-height:235px;
  }
}

/* On genuinely large canvases keep individual cards roughly the same readable
   width. The extra pixels create extra columns instead of larger cards. */
@media (min-width:2200px){
  .story-wall{
    grid-template-columns:repeat(auto-fill,minmax(285px,1fr))!important;
  }
}

@media (min-width:3400px){
  .story-wall{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
  }
}

/* Tablet/mobile behavior remains the established ZIRFLO layout. */
@media (max-width:900px){
  .site-header,
  .zirflo-page{
    width:calc(100% - 24px);
  }
}