/* ZEITUNG.IO / SECTION SYSTEM V119
   Compact editorial grid.
   Same visual language as front page.
*/

:root{
  --io119-paper:#f5f0e8;
  --io119-paper2:#eee8de;
  --io119-ink:#0b0e0f;
  --io119-muted:#737672;
  --io119-line:#c8c0b5;
  --io119-red:#ef4035;
  --io119-dark:#10272d;
}

/* ---------- STORIES GRID ---------- */

.io119-grid{
  width:min(1376px,calc(100% - 48px)) !important;
  margin:0 auto !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;

  border-top:1px solid #9e978d !important;
  border-left:0 !important;
  border-right:0 !important;

  background:var(--io119-paper) !important;
}

.io119-grid > [data-archive-item]{
  position:relative !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:22px 22px 25px !important;

  display:block !important;

  border:0 !important;
  border-right:1px solid var(--io119-line) !important;
  border-bottom:1px solid var(--io119-line) !important;

  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.io119-grid > [data-archive-item]:nth-child(3n){
  border-right:0 !important;
}

/* image */
.io119-grid .card-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10 !important;

  margin:0 0 17px !important;

  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;

  overflow:hidden !important;
  border-radius:0 !important;

  filter:saturate(.92) contrast(1.02);
  transition:filter .25s ease, transform .25s ease !important;
}

.io119-grid [data-archive-item]:hover .card-image{
  filter:saturate(1) contrast(1.02);
}

/* copy */
.io119-grid .card-copy{
  display:block !important;
  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;
}

.io119-grid .card-copy > small{
  display:block !important;
  margin:0 0 9px !important;

  color:var(--io119-muted) !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:9px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;

  text-transform:uppercase !important;
}

.io119-grid .card-copy > small b{
  color:var(--io119-red) !important;
  font-size:11px !important;
}

.io119-grid .card-copy h2{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;

  margin:0 0 11px !important;
  padding:0 !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(22px,1.75vw,28px) !important;
  line-height:1.01 !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;

  text-wrap:balance;
}

.io119-grid .card-copy h2 a{
  color:var(--io119-ink) !important;
  text-decoration:none !important;
}

.io119-grid .card-copy h2 a:hover{
  color:#333 !important;
}

.io119-grid .card-copy > p{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;

  min-height:0 !important;
  max-width:95% !important;

  margin:0 0 17px !important;

  color:#424542 !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
}

/* compact trust line */
.io119-grid .trust{
  min-height:27px !important;

  margin:0 !important;
  padding:10px 0 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;

  border-top:1px solid rgba(80,80,75,.18) !important;

  color:#777a77 !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;

  text-transform:uppercase !important;
}

.io119-grid .trust b{
  color:var(--io119-ink) !important;
  font:inherit !important;
  font-weight:800 !important;
}

.io119-grid .trust span{
  font:inherit !important;
}

/* ---------- FEATURE CARD ----------
   Every seventh card breaks the rhythm.
*/

.io119-grid > [data-archive-item].io119-feature{
  grid-column:span 2 !important;

  min-height:330px !important;

  display:grid !important;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) !important;
  align-items:stretch !important;

  padding:0 !important;

  background:#0d1113 !important;
  color:#f5f0e8 !important;

  border-right:1px solid var(--io119-line) !important;
}

.io119-grid > [data-archive-item].io119-feature .card-image{
  width:100% !important;
  height:100% !important;
  min-height:330px !important;
  aspect-ratio:auto !important;

  margin:0 !important;

  filter:saturate(.86) contrast(1.04) !important;
}

.io119-grid > [data-archive-item].io119-feature .card-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  padding:31px 32px !important;
}

.io119-grid > [data-archive-item].io119-feature .card-copy > small{
  color:#abb4b4 !important;
}

.io119-grid > [data-archive-item].io119-feature .card-copy h2{
  -webkit-line-clamp:4 !important;

  margin-bottom:16px !important;

  font-size:clamp(31px,2.7vw,43px) !important;
  line-height:.96 !important;
}

.io119-grid > [data-archive-item].io119-feature .card-copy h2 a{
  color:#f5f0e8 !important;
}

.io119-grid > [data-archive-item].io119-feature .card-copy > p{
  max-width:100% !important;
  color:#c2c8c7 !important;
}

.io119-grid > [data-archive-item].io119-feature .trust{
  margin-top:auto !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#9ca6a7 !important;
}

.io119-grid > [data-archive-item].io119-feature .trust b{
  color:#f5f0e8 !important;
}

/* hidden archive items stay hidden */
.io119-grid > [data-archive-item][hidden]{
  display:none !important;
}

/* ---------- LOAD MORE ----------
   No giant black banner.
*/

.archive-load-wrap{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;

  background:#0c0f10 !important;

  border:0 !important;
  border-bottom:2px solid var(--io119-red) !important;
}

.archive-load{
  width:min(1376px,calc(100% - 48px)) !important;

  height:64px !important;
  min-height:64px !important;

  margin:0 auto !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto 54px !important;
  align-items:center !important;
  gap:22px !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  color:#f5f0e8 !important;
  cursor:pointer !important;
}

.archive-load > span{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;

  text-transform:uppercase !important;
}

.archive-load > small{
  display:flex !important;
  gap:5px !important;
  align-items:center !important;

  color:#9ca5a6 !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;

  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.archive-load > small b{
  color:#f5f0e8 !important;
  font:inherit !important;
}

.archive-load > i{
  width:54px !important;
  height:40px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-left:1px solid rgba(255,255,255,.16) !important;

  color:var(--io119-red) !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:26px !important;
  font-style:normal !important;
  font-weight:300 !important;

  transition:transform .18s ease !important;
}

.archive-load:hover > i{
  transform:translateX(4px) !important;
}

.archive-load[hidden],
.archive-load-wrap[hidden]{
  display:none !important;
}

/* ---------- TABLET ---------- */

@media(max-width:1020px){

  .io119-grid{
    width:calc(100% - 32px) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .io119-grid > [data-archive-item],
  .io119-grid > [data-archive-item]:nth-child(3n){
    border-right:1px solid var(--io119-line) !important;
  }

  .io119-grid > [data-archive-item]:nth-child(2n){
    border-right:0 !important;
  }

  .io119-grid > [data-archive-item].io119-feature{
    grid-column:1/-1 !important;
    grid-template-columns:1.2fr .8fr !important;
    border-right:0 !important;
  }

  .archive-load{
    width:calc(100% - 32px) !important;
  }
}

/* ---------- MOBILE ---------- */

@media(max-width:680px){

  .io119-grid{
    width:calc(100% - 24px) !important;

    display:block !important;

    border-top:1px solid var(--io119-line) !important;
  }

  .io119-grid > [data-archive-item],
  .io119-grid > [data-archive-item]:nth-child(2n),
  .io119-grid > [data-archive-item]:nth-child(3n),
  .io119-grid > [data-archive-item].io119-feature{

    width:100% !important;
    min-height:0 !important;

    display:grid !important;
    grid-template-columns:116px minmax(0,1fr) !important;
    gap:14px !important;

    margin:0 !important;
    padding:16px 0 !important;

    background:transparent !important;
    color:var(--io119-ink) !important;

    border:0 !important;
    border-bottom:1px solid var(--io119-line) !important;
  }

  .io119-grid > [data-archive-item] .card-image,
  .io119-grid > [data-archive-item].io119-feature .card-image{

    grid-column:1 !important;
    grid-row:1 !important;

    width:116px !important;
    height:116px !important;
    min-height:116px !important;

    margin:0 !important;

    aspect-ratio:1/1 !important;
  }

  .io119-grid > [data-archive-item] .card-copy,
  .io119-grid > [data-archive-item].io119-feature .card-copy{

    grid-column:2 !important;

    display:block !important;

    padding:0 !important;
  }

  .io119-grid .card-copy > small,
  .io119-grid > [data-archive-item].io119-feature .card-copy > small{
    margin-bottom:6px !important;
    color:var(--io119-muted) !important;
    font-size:7px !important;
  }

  .io119-grid .card-copy h2,
  .io119-grid > [data-archive-item].io119-feature .card-copy h2{

    -webkit-line-clamp:3 !important;

    margin:0 0 7px !important;

    font-size:19px !important;
    line-height:1 !important;
  }

  .io119-grid > [data-archive-item].io119-feature .card-copy h2 a{
    color:var(--io119-ink) !important;
  }

  .io119-grid .card-copy > p,
  .io119-grid > [data-archive-item].io119-feature .card-copy > p{
    display:none !important;
  }

  .io119-grid .trust,
  .io119-grid > [data-archive-item].io119-feature .trust{

    justify-content:flex-start !important;

    gap:9px !important;

    margin-top:8px !important;
    padding-top:7px !important;

    color:#7a7d79 !important;
    border-color:rgba(80,80,75,.16) !important;

    font-size:6px !important;
  }

  .io119-grid > [data-archive-item].io119-feature .trust b{
    color:var(--io119-ink) !important;
  }

  .archive-load{
    width:calc(100% - 24px) !important;
    height:58px !important;
    min-height:58px !important;

    grid-template-columns:minmax(0,1fr) auto 38px !important;
    gap:8px !important;
  }

  .archive-load > span{
    font-size:14px !important;
  }

  .archive-load > small{
    font-size:7px !important;
    letter-spacing:.07em !important;
  }

  .archive-load > i{
    width:38px !important;
    height:36px !important;
    font-size:22px !important;
  }
}

@media(max-width:390px){

  .io119-grid > [data-archive-item],
  .io119-grid > [data-archive-item].io119-feature{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .io119-grid > [data-archive-item] .card-image,
  .io119-grid > [data-archive-item].io119-feature .card-image{
    width:96px !important;
    height:104px !important;
    min-height:104px !important;
  }

  .io119-grid .card-copy h2,
  .io119-grid > [data-archive-item].io119-feature .card-copy h2{
    font-size:17px !important;
  }
}