/* =========================================
   LAYOUT
========================================= */

.page{
  min-height: 100vh;
  padding-bottom: 72px; /* room for fixed footer */
}

.container{
  max-width: var(--max);
  margin: 0 auto; 
}

.main{
  padding-top: var(--main-pad-top);
}


/* =========================================
   Section 
========================================= */
.section{
  padding: var(--section-pad-y) var(--gutter);

}

/* Section header row */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: var(--gap-2);
  margin-bottom: var(--gap-1);
}

.section-block{
  padding: var(--section-pad-y) 0;
}

.section-block > *{
  max-width: var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.section-block > h1,
.section-block > h2,
.section-block > h3,
.section-block > h4{
  margin:0 0 var(--gap-2) 0;
}


@media (max-width: 980px){
  .section-head{ flex-direction: column; align-items:flex-start; }
}

/* =========================================
   Stack — vertical rhythm
========================================= */

.stack{
  display:flex;
  flex-direction:column;
  gap: var(--stack-gap);
}

.stack.tight{ gap: var(--stack-gap-tight); }
.stack.loose{ gap: var(--stack-gap-loose); }

/* Optical tightening after headings */
.stack :is(h1,h2,h3,h4,h5,h6,.display,.h1,.h2,.h3,.h4,.h5,.h6) +
:is(p,.lead-text,.sub-text,.note,.body){
  margin-top: calc(-1 * var(--space-1) * 0.35);
}

/* ---------- Cards ---------- */
.card{
  padding: var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--color-medium);
  background-color: var(--bg);
}

/* Card footer links */
.card-links{
  margin-top: var(--gap-1);
  padding-top: calc(var(--gap-1) * 0.75);
  border-top: 1px dotted var(--color-medium);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Image wrapper (smaller, top-left) */
.card-img{
  max-width: 84px;
  margin: 0 0 var(--gap-1) 0;  /* no horizontal auto */
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-medium);
}

/* Image behavior */
.card-img img{
  width: 100%;
  height: auto;
  display: block;
}


.thumb{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--color-medium);
}
.thumb img{ width:100%; display:block; }

/* Make entire card clickable */
.card-link{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus (accessibility) */
.card-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: inherit;
}

/* =========================================
   Card media background (image as card)
========================================= */

.card.card-bg{
position:relative;
padding:var(--card-pad);
aspect-ratio:4/5;

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

display:flex;
flex-direction:column;
justify-content:flex-end;
}

/* subtle readability layer */
.card.card-bg::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.35),
rgba(0,0,0,0)
);
z-index:1;
}

/* text content sits above overlay */
.card.card-bg > *{
position:relative;
z-index:2;
}

/* =========================================
   Cards grid — system
   cols-1: 1
   cols-2: 1 / 2
   cols-4: 1 / 2 / 4
========================================= */

/* Base grid */
.grid.cards{
  display:grid;
  gap: var(--gap-1);
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
}

/* Column controls */
.grid.cards.cols-1{
  grid-template-columns: 1fr;
}

/* cols-2: 1 -> 2 */
@media (min-width:700px){
  .grid.cards.cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* cols-4: 1 -> 2 -> 4  (THIS is the fix) */
.grid.cards.cols-4{
  grid-template-columns: 1fr;
}

@media (min-width:700px){
  .grid.cards.cols-4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:900px){
  .grid.cards.cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Featured card behaviors */
.card.featured{
  grid-column: 1 / -1;
}

.card.featured-tall{
  grid-row: span 2;
}

/* Only add this class to grids that use featured-tall */
.grid.cards.use-row-span{
  grid-auto-rows: 1fr;
  align-items: stretch;
}

/* ==== CORNER PLATES ==== */

.corner-plates{
  position: relative;
}

.corner-plates::before,
.corner-plates::after{
  content:"";
  position:absolute;
  left:-3px;
  right:-3px;
  height: var(--plate-length);
  pointer-events:none;
  z-index:10;
}

.corner-plates::before,
.corner-plates::after{
  background:
  linear-gradient(var(--plate-color),var(--plate-color)) left var(--edge) / var(--plate-thickness) var(--plate-length) no-repeat,
  linear-gradient(var(--plate-color),var(--plate-color)) left var(--edge) / var(--plate-length) var(--plate-thickness) no-repeat,
  linear-gradient(var(--plate-color),var(--plate-color)) right var(--edge) / var(--plate-thickness) var(--plate-length) no-repeat,
  linear-gradient(var(--plate-color),var(--plate-color)) right var(--edge) / var(--plate-length) var(--plate-thickness) no-repeat;
}

.corner-plates::before{ --edge: top; top:-3px; }
.corner-plates::after{ --edge: bottom; bottom:-3px; }