/* =========================================================
   MAGAZINE THEME — LISTING
   Category / Tag / Archive pages
========================================================= */


/* =========================================================
   PAGE RESET
========================================================= */

body:has(.post-grid) main.content-card,
.content-card:has(.post-grid){
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;

  margin:0 0 12px;
  padding:0;

  color:#767676;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:10px;
  font-weight:800;
  line-height:1.35;

  letter-spacing:.035em;
}

.crumbs__item{
  color:#111;
  text-decoration:none;

  transition:color .18s ease;
}

.crumbs__item:hover{
  color:var(--mag-red, #e31b23);
}

.crumbs__sep{
  color:#aaa;
}

.crumbs__current{
  color:#666;
}


/* =========================================================
   CATEGORY / TAG HEADER
========================================================= */

.cat-head{
  position:relative;

  margin:0 0 32px;
  padding:20px 0 26px;

  border-top:6px solid #111;
  border-bottom:1px solid #d8d8d8;

  color:#111;
  background:#fff;
}

.cat-head::before{
  content:"";

  position:absolute;
  top:-6px;
  left:0;

  width:90px;
  height:6px;

  background:var(--mag-red, #e31b23);
}

.cat-title{
  max-width:18ch;

  margin:0;

  color:#111;

  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(46px, 6vw, 82px);
  font-weight:900;
  line-height:.92;

  letter-spacing:-.045em;
  text-wrap:balance;
}

.cat-desc{
  max-width:66ch;

  margin:18px 0 0;

  color:#555;

  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  font-weight:400;
  line-height:1.55;
}


/* =========================================================
   POST GRID
========================================================= */

.post-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:34px 26px;

  margin:0;
}


/* =========================================================
   POST CARD
========================================================= */

.post-card{
  min-width:0;

  margin:0;
  padding:0 0 22px;

  border:0;
  border-bottom:1px solid #d8d8d8;
  border-radius:0;

  color:#111;
  background:#fff;

  box-shadow:none;
}

.post-card__link{
  display:block;

  color:inherit;
  text-decoration:none;
}


/* =========================================================
   POST MEDIA
========================================================= */

.post-card__media{
  position:relative;

  width:100%;
  aspect-ratio:16 / 10;

  margin:0 0 17px;
  overflow:hidden;

  border:0;
  border-radius:0;

  background:#ececec;
}

.post-card__media::after{
  content:"";

  position:absolute;
  inset:auto 0 0;

  height:4px;

  background:#111;

  transition:background .18s ease;
}

.post-card__media picture{
  display:block;
  width:100%;
  height:100%;
}

.post-card__media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .35s ease;
}

.post-card__placeholder{
  width:100%;
  height:100%;

  background:
    linear-gradient(145deg, #f1f1f1, #dfdfdf);
}


/* =========================================================
   POST BODY
========================================================= */

.post-card__body{
  min-width:0;
}

.post-card__title{
  margin:0;

  color:#111;

  font-family:Georgia, "Times New Roman", serif;
  font-size:26px;
  font-weight:900;
  line-height:1.03;

  letter-spacing:-.028em;
  text-wrap:balance;
  overflow-wrap:anywhere;
  hyphens:auto;

  transition:color .18s ease;
}

.post-card .muted{
  margin:11px 0 9px !important;

  color:#777;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:10px;
  font-weight:800;
  line-height:1.3;

  letter-spacing:.05em;
  text-transform:uppercase;
}

.post-card__excerpt{
  margin:0;

  color:#555;

  font-family:Georgia, "Times New Roman", serif;
  font-size:15px;
  line-height:1.55;
}


/* =========================================================
   HOVER
========================================================= */

.post-card__link:hover .post-card__media img{
  transform:scale(1.025);
}

.post-card__link:hover .post-card__media::after{
  background:var(--mag-red, #e31b23);
}

.post-card__link:hover .post-card__title{
  color:var(--mag-red, #e31b23);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.cat-head + .empty-state,
.crumbs + .cat-head + .empty-state{
  margin:0;
}


/* =========================================================
   PAGER
========================================================= */

.pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  margin:42px 0 0;
  padding:22px 0 0;

  border-top:4px solid #111;
}

.pager__btn,
.pager__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;

  border:1px solid #111;
  border-radius:0;

  color:#111;
  background:#fff;

  font-family:var(
    --font-sans,
    "Inter",
    Arial,
    sans-serif
  );

  font-size:10px;
  font-weight:900;
  line-height:1;

  letter-spacing:.045em;
  text-decoration:none;
  text-transform:uppercase;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.pager__btn{
  padding:0 14px;
}

.pager__nums{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.pager__num{
  min-width:38px;
  padding:0 10px;
}

.pager__btn:hover,
.pager__num:hover,
.pager__num.is-current{
  border-color:#111;

  color:#fff;
  background:#111;
}

.pager__num.is-current{
  pointer-events:none;
}

.pager__btn.is-disabled{
  opacity:.35;
  pointer-events:none;
}

.pager__dots{
  color:#777;
  font-weight:900;
}


/* =========================================================
   FEATURED FIRST ITEM
========================================================= */

@media (min-width:901px){

  .post-grid .post-card:first-child{
    grid-column:1 / -1;

    display:grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(280px, .55fr);
    gap:26px;
    align-items:end;

    padding-bottom:28px;
  }

  .post-grid .post-card:first-child .post-card__link{
    display:contents;
  }

  .post-grid .post-card:first-child .post-card__media{
    margin:0;
  }

  .post-grid .post-card:first-child .post-card__title{
    font-size:clamp(34px, 3.4vw, 50px);
  }

  .post-grid .post-card:first-child .post-card__excerpt{
    font-size:17px;
  }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

  .cat-title{
    font-size:clamp(42px, 8vw, 66px);
  }

  .post-grid{
    gap:30px 22px;
  }

  .post-card__title{
    font-size:26px;
  }
}


@media (max-width:720px){

  .crumbs{
    margin-bottom:10px;
    font-size:9px;
  }

  .cat-head{
    margin-bottom:26px;
    padding:17px 0 22px;
  }

  .cat-head::before{
    width:64px;
  }

  .cat-title{
    max-width:none;

    font-size:clamp(38px, 12vw, 54px);
    line-height:.96;
  }

  .cat-desc{
    margin-top:15px;

    font-size:16px;
  }

  .post-grid{
    grid-template-columns:1fr;
    gap:27px;
  }

  .post-card{
    padding-bottom:20px;
  }

  .post-card__media{
    margin-bottom:15px;
  }

  .post-card__title{
    font-size:27px;
  }

  .post-card__excerpt{
    font-size:15px;
  }

  .pager{
    justify-content:center;

    margin-top:34px;
  }

  .pager__nums{
    width:100%;
    order:-1;
  }
}


@media (max-width:480px){

  .post-card__media{
    aspect-ratio:4 / 3;
  }

  .post-card__title{
    font-size:24px;
  }

  .pager__btn{
    flex:1;
  }
}