/* ==========================================================
   BUILD 10.0 — SAFareig horizontal + uniform card systems
   ========================================================== */
:root{
  --v10-rose:#b76f87;
  --v10-rose-soft:#fbf3f6;
  --v10-rose-line:#dfb5c3;
}

/* Safareig: subtle rose identity without washing out the photography */
.v9-safareig{
  position:relative;
  border-top:4px solid var(--v10-rose)!important;
  padding-top:24px!important;
}
.v9-safareig::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--v10-rose-line);
}
.v9-safareig .v7-safareig-author{
  color:#f1b3c7!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.v9-safareig .v7-safareig-topline small{
  border-left:3px solid rgba(242,180,199,.85);
  padding-left:9px;
}
.v10-safareig-side-wrap{
  min-width:0;
  border-left:1px solid var(--v10-rose-line);
  padding-left:18px;
}
.v10-safareig-side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:2px solid var(--v10-rose-line);
}
.v10-safareig-side-head>span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  color:var(--v10-rose);
}
.v10-safareig-side-head .v9-carousel-controls{display:none}
.v10-safareig-side{border-left:0!important;padding-left:0!important}
.v10-safareig-side-card{
  min-height:0;
  background:linear-gradient(90deg,var(--v10-rose-soft),#fff 72%);
  border-bottom-color:var(--v10-rose-line)!important;
}
.v10-safareig-side-card .eyebrow{color:var(--v10-rose)!important}
.v10-safareig-side-card h3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Uniformity: every card in a section uses one image ratio and one typographic grid */
.v9-row-cards>.v6-card,
.v9-comic-track>.v9-comic-card,
.v9-veus-track>.v9-veu-card{
  min-width:0;
}
.v9-row-cards>.v6-card{
  display:flex!important;
  flex-direction:column;
  height:100%;
}
.v9-row-cards>.v6-card>a{
  display:block;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#ece7dd;
}
.v9-row-cards>.v6-card>a img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  aspect-ratio:auto!important;
}
.v9-row-cards>.v6-card h3{
  font-size:20px!important;
  line-height:1.04!important;
  min-height:3.12em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.v9-row-cards>.v6-card .story-meta{margin-top:auto}
.v9-row-cards>.v6-card .v6-card-deck{display:none!important}

/* Section-specific ratios remain consistent inside each section */
.v9-corral .v9-row-cards>.v6-card>a{aspect-ratio:2.35/1}
.v9-corral .v9-row-cards>.v6-card h3{min-height:2.08em;-webkit-line-clamp:2}
.v9-comic-card>a{aspect-ratio:4/5!important}
.v9-comic-card>a img{width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important}
.v9-comic-card h3{min-height:2.08em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v9-veu-card img{aspect-ratio:1/1!important}
.v9-event-row .v8-event-image{aspect-ratio:2.08/1;overflow:hidden}
.v9-event-row .v8-event-image img{width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important}

@media (max-width:980px){
  .v10-safareig-side-wrap{border-left:0;padding-left:0}
}

@media (max-width:760px){
  .v9-safareig{padding-bottom:18px!important}
  .v10-safareig-side-wrap{
    margin-top:2px;
    padding:11px 0 4px;
    background:var(--v10-rose-soft);
    border-top:1px solid var(--v10-rose-line);
    border-bottom:1px solid var(--v10-rose-line);
  }
  .v10-safareig-side-head{
    margin:0 12px 10px;
    padding-bottom:7px;
  }
  .v10-safareig-side-head .v9-carousel-controls{display:flex}
  .v10-safareig-side{
    display:flex!important;
    flex-direction:row!important;
    gap:12px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch;
    padding:0 12px 10px!important;
    margin:0!important;
    scrollbar-width:thin;
    scrollbar-color:var(--v10-rose) transparent;
  }
  .v10-safareig-side::after{
    content:"";
    flex:0 0 1px;
  }
  .v10-safareig-side-card{
    flex:0 0 82vw!important;
    max-width:430px;
    min-height:176px;
    display:grid!important;
    grid-template-columns:43% 1fr!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    scroll-snap-align:start;
    border:1px solid var(--v10-rose-line)!important;
    background:#fff!important;
  }
  .v10-safareig-side-card>a{
    margin:0!important;
    height:100%;
    background:#eadfe3;
  }
  .v10-safareig-side-card img{
    width:100%!important;
    height:100%!important;
    min-height:174px;
    object-fit:cover!important;
    aspect-ratio:auto!important;
  }
  .v10-safareig-side-card>div{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:12px 12px 10px;
  }
  .v10-safareig-side-card h3{
    font-size:20px!important;
    line-height:1.02!important;
    min-height:3.06em;
    -webkit-line-clamp:3;
  }
  .v10-safareig-side-card .story-meta{margin-top:auto}

  /* On mobile, section cards remain horizontally scrollable but equal */
  .v9-row-cards>.v6-card{
    flex:0 0 78vw!important;
    max-width:330px;
  }
  .v9-row-cards>.v6-card>a{aspect-ratio:4/3!important}
  .v9-corral .v9-row-cards>.v6-card>a{aspect-ratio:2.35/1!important}
  .v9-row-cards>.v6-card h3{font-size:20px!important;min-height:3.12em}
  .v9-comic-card{flex-basis:60vw!important;max-width:250px!important}
  .v9-event-row .v8-event-image{aspect-ratio:1.15/1}
}


/* ==========================================================
   BUILD 10.1 — Safareig carousel hard fix
   ========================================================== */
@media (max-width:980px){
  .v9-safareig{
    display:block!important;
  }
  .v10-safareig-side-wrap{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    overflow:hidden!important;
    margin-top:0!important;
    padding:12px 0 5px!important;
    border-left:0!important;
    border-top:1px solid var(--v10-rose-line)!important;
    border-bottom:1px solid var(--v10-rose-line)!important;
    background:linear-gradient(90deg,#fff 0%,var(--v10-rose-soft) 48%,#fff 100%)!important;
  }
  .v10-safareig-side-head{
    margin:0 14px 10px!important;
  }
  .v10-safareig-side{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:stretch!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:14px!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    padding:0 14px 12px!important;
    margin:0!important;
    border-left:0!important;
    scrollbar-width:none!important;
  }
  .v10-safareig-side::-webkit-scrollbar{display:none!important}
  .v10-safareig-side::after{
    content:""!important;
    display:block!important;
    flex:0 0 14px!important;
    width:14px!important;
  }
  .v10-safareig-side-card{
    display:grid!important;
    grid-template-columns:44% minmax(0,1fr)!important;
    flex:0 0 min(82vw,430px)!important;
    width:min(82vw,430px)!important;
    max-width:min(82vw,430px)!important;
    min-width:min(82vw,430px)!important;
    min-height:184px!important;
    height:auto!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--v10-rose-line)!important;
    border-bottom:1px solid var(--v10-rose-line)!important;
    background:#fff!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  .v10-safareig-side-card>a{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:182px!important;
    margin:0!important;
    overflow:hidden!important;
    background:#eadfe3!important;
  }
  .v10-safareig-side-card>a picture,
  .v10-safareig-side-card>a img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:182px!important;
    object-fit:cover!important;
    aspect-ratio:auto!important;
  }
  .v10-safareig-side-card>div{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    padding:13px 13px 11px!important;
  }
  .v10-safareig-side-card .eyebrow{
    margin:0 0 7px!important;
  }
  .v10-safareig-side-card h3{
    font-size:20px!important;
    line-height:1.03!important;
    margin:0!important;
    min-height:0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .v10-safareig-side-card .story-meta{
    margin-top:auto!important;
    padding-top:10px!important;
  }
}

@media (max-width:480px){
  .v10-safareig-side-card{
    flex-basis:86vw!important;
    width:86vw!important;
    max-width:86vw!important;
    min-width:86vw!important;
    grid-template-columns:42% minmax(0,1fr)!important;
  }
}