/* =========================================================
   Magazine Archive Layout (fixed-height tiles, no overlap)
   ========================================================= */

/* Header */
.mag-archive-header{

  padding:42px 0 18px;

}
.mag-archive-title{
  margin:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:.2px;
}
.mag-archive-desc{
  margin:0;
  font-size:12px;
  opacity:.75;
}

.mag-container .ast-article-post:last-child{
  border-bottom: 1px solid #1a1f2a;
}

/* Grid */
.mag-grid{
  display:grid;
  gap:0;
  border-left:1px solid #1a1f2a;
  border-top:1px solid #1a1f2a;

  grid-template-columns:2fr 1fr 1fr;
  grid-auto-rows: 480px;

  grid-template-areas:
    "feature side1 side1"
    "feature side2 side2"
    "card1  card2 card3";

  max-width: 1400px;
  margin-left: auto;   /* <-- center horizontally */
  margin-right: auto;  /* <-- center horizontally */
  margin-bottom: 120px;
}


/* Areas */
.mag-item--1{ grid-area: feature; }
.mag-item--2{ grid-area: side1; }
.mag-item--3{ grid-area: side2; }
.mag-item--4{ grid-area: card1; }
.mag-item--5{ grid-area: card2; }
.mag-item--6{ grid-area: card3; }

/* Tile */
.mag-item{
  margin:0;
  background:#fff;
  border-right:1px solid #1a1f2a;
  border-bottom:1px solid #1a1f2a;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  /* important for flex overflow in grid */
  min-height:0;
}

/* Thumb */
/* Square thumbnail (all tiles) */
.mag-thumb{
  display:block;
  aspect-ratio: 1 / 1;   /* <-- makes it square */
  width: 100%;
  flex: 0 0 70% ;     /* stop the % height behavior */
  overflow:hidden;
  background:#f3f3f3;
  margin-bottom: 8px;    /* keep your gap */
}

.mag-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* Meta */
.mag-meta{
  flex: 1 1 auto;
  padding:14px 18px 18px;
  min-height:0;
  overflow:hidden; /* prevents content from increasing tile height */
}

.mag-date{
  display:block;
  font-size:11px;
  opacity:.75;
  margin-bottom:10px;
}

/* Title (clamp to avoid overflow/tall rows) */
.mag-title{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
  font-weight:600;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;   /* change to 3 if you want more lines */
  overflow:hidden;
}

.mag-item--1 .mag-title{
  font-size:26px;
  line-height:1.15;
  -webkit-line-clamp:3; /* feature can show a bit more */
}

.mag-item--4 .mag-title,
.mag-item--5 .mag-title,
.mag-item--6 .mag-title{
  font-size:18px;
  -webkit-line-clamp:2;
}

.mag-title a{
  color:inherit;
  text-decoration:none !important;
}
.mag-title a:hover{
  text-decoration:none !important;
}

.mag-tax{
  margin-top:6px;
  font-size:11px;
  opacity:.85;

  /* optional: prevent category line from stretching */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Responsive */
@media (max-width: 980px){
  .mag-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "feature"
      "side1"
      "side2"
      "card1"
      "card2"
      "card3";
    grid-auto-rows:auto;
  }

  .mag-item{ display:block; }
  .mag-thumb{ flex:none; }
  .mag-meta{ overflow:visible; }
  .mag-title{
    display:block;
    -webkit-line-clamp:unset;
  }
}


/* --- Add inner gutter so content doesn't touch borders --- */
.mag-item{
  box-sizing: border-box;
  padding: 12px;            /* controls the inset from the border */
}

/* thumb/meta should respect the inset padding */
.mag-thumb{
  width: 100%;
  flex: 0 0 70%;            /* re-balance after adding padding (tweak 68–74%) */
}

/* keep meta from kissing bottom border */
.mag-meta{
  padding: 12px 12px 16px;  /* bottom padding = breathing room */
  overflow: hidden;
}

/* push taxonomy away from the bottom edge nicely */
.mag-tax{
  margin-top: auto;         /* keeps it at the bottom of meta area */
  padding-top: 6px;
}

/* optional: small gap between image and meta */
.mag-thumb{
  margin-bottom: 8px;
}

/* =========================================================
   Normalize bottom three cards (equal visual size)
   ========================================================= */

/* Bottom row cards need a different internal ratio */
.mag-item--4,
.mag-item--5,
.mag-item--6{
  display: flex;
  flex-direction: column;
}



/* Meta fills remaining space evenly */
.mag-item--4 .mag-meta,
.mag-item--5 .mag-meta,
.mag-item--6 .mag-meta{
  flex: 1 1 auto;
  padding: 12px 12px 16px;
}

/* Lock title height so all three align */
.mag-item--4 .mag-title,
.mag-item--5 .mag-title,
.mag-item--6 .mag-title{
  min-height: calc(1.2em * 2); /* 2-line lock */
}
.onepage-related__bar {
    display: flex;
    justify-content: center;
}
.mag-load-more:disabled{
  opacity:.6;
  cursor:not-allowed;
}