/* ===== Home width helpers ===== */
:root {
  --gutter: 30px;
  --max: 1200px;
}

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

.home-gutter {
  width: calc(100% - (var(--gutter) * 2));
  margin-left: auto;
  margin-right: auto;
}

.home-section { margin: 24px 0; }

/* ===== Section 1: Hero ===== */
.home-hero { margin-top: 18px; }
.home-hero__link { display: block; }
.home-hero__img { display: block; width: 100%; height: auto; }
.home-hero__link:hover .home-hero__img { opacity: 0.92; }

/* ===== Section 3: Editor content ===== */
.home-content { padding: 10px 0; }

/* Allow full-width blocks, keep normal blocks readable */
.entry-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.entry-content > .alignwide {
  max-width: calc(var(--max) + 240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.entry-content > .alignfull {
  width: 100%;
  max-width: none;
}

/* ===== Section 2: SIMPLE magazine hover rows (always 4:3) ===== */

.jw-hover-grid{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* each row animates its own height */
.jw-row{
  --gap: 14px;

  /* JS sets these per-row */
  --h-base: auto;
  --h-active: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;

  height: auto;          /* GSAP sets explicit px height */
  overflow: visible;

  /* REMOVE the CSS transition (GSAP will animate height) */
  transition: none;
  will-change: height;
  isolation: isolate;
}


/* Tiles */
.jw-tile{
  display: block;
  text-decoration: none;
}

/* Always 4:3 in baseline */
.jw-tile__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f5;
}

.jw-tile__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 200ms ease;
}

.jw-tile:hover .jw-tile__img{ opacity: .92; }

.jw-tile:focus-visible{
  outline: 2px solid #111;
  outline-offset: 3px;
}

/* Active layout: big tile + stacked column */
.jw-row.is-active{
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;

  /* smooth height change */
  height: var(--h-active);
}

/* big on right */
.jw-row.is-active.big-right{
  grid-template-columns: 1fr 2fr;
}

/* In active mode, frames fill cells (ratio comes from row height math) */
.jw-row.is-active .jw-tile__frame{
  aspect-ratio: auto;
  height: 100%;
}

/* Roles */
.jw-row.is-active .jw-tile.is-big{
  grid-row: 1 / span 2;
  grid-column: 1;
  z-index: 2;
}
.jw-row.is-active.big-right .jw-tile.is-big{
  grid-column: 2;
}

.jw-row.is-active .jw-tile.is-small-top{
  grid-row: 1;
  grid-column: 2;
}
.jw-row.is-active .jw-tile.is-small-bottom{
  grid-row: 2;
  grid-column: 2;
}
.jw-row.is-active.big-right .jw-tile.is-small-top,
.jw-row.is-active.big-right .jw-tile.is-small-bottom{
  grid-column: 1;
}

/* Responsive: disable interaction */
@media (max-width: 900px){
  .jw-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }
  .jw-row.is-active{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .jw-row.is-active .jw-tile__frame{
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .jw-row.is-active .jw-tile{
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 560px){
  .jw-row{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   JW GRID HARD RESET (prevents theme/global WP rules from
   causing jumpiness inside the hover grid)
   Put this at the VERY END of your CSS file.
------------------------------------------------------------ */

#jwHoverGrid,
#jwHoverGrid *{
  box-sizing: border-box;
}

#jwHoverGrid a{
  color: inherit;
}

#jwHoverGrid .jw-tile{
  display: block;
  line-height: 0;          /* kills inline/line-height layout wobble */
  transform: none !important;
  transition: none !important;  /* prevents theme "transition: all" */
}

#jwHoverGrid .jw-tile__frame{
  display: block;
}

#jwHoverGrid img,
#jwHoverGrid picture,
#jwHoverGrid source{
  max-width: none;         /* theme often sets max-width:100% globally */
}

#jwHoverGrid .jw-tile__img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  /* keep ONLY the opacity transition you want */
  transition: opacity 200ms ease !important;
  transform: none !important;
}

.jw-row, .jw-tile { transform: translateZ(0); }