/* Grid wrapper: 2 rows × 3 cols on desktop */
.home-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
  padding: 20px;
}

/* Cells share a simple card treatment */
.home-grid .cell{
  background: var(--jd-nearly-blk, #0f0f0f);
  color: var(--jd-cream, #F8EDC2);
  /* border: 1px solid rgba(255,255,255,.08); */
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display:flex;
  flex-direction: column;
}

.home-section-title {
	margin-bottom: 10px;
}

.home-section-extra {
	width: 40%;
}

/* Don't let the link fill the card */
.home-grid .card > a.tile{ display:block; height:auto; }


.home-grid .card .img{
  aspect-ratio: 16/9;
  overflow:hidden;
}
.home-grid .card .img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-grid .card .meta{
  padding: 10px 0 0;
}
/* remove underline from the main tile link */
.home-grid .cell.card > a,
.home-grid .cell.card > a:hover,
.home-grid .cell.card > a:focus,
.home-grid .cell.card > a:active,
.home-grid .cell.card > a:visited{
  text-decoration: none;
  color: inherit;
}

/* base */
.home-grid .cell.card .meta .title h2,
.home-grid .cell.card .meta .sub h3{
  transition: color .5s ease;
}

/* when hovering either .img or .meta (i.e., the link) */
.home-grid .cell.card > a:hover .meta .title h2,
.home-grid .cell.card > a:hover .meta .sub h3{
  color: var(--jd-mustard);
}



/* Responsive: stack on small screens 

@media (min-width: 1500px){
	.home-grid .card .meta{ min-height: 20px; }
}*/

@media (max-width: 900px){
  .home-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .home-grid{ grid-template-columns: 1fr; }
}

/* Local knobs for the effect */
.home-grid{
  --cine-zoom-scale: 1.06;      /* try 1.08 for more punch */
  --cine-zoom-duration: 2400ms; /* 3s is very slow, 1800ms snappier */
}

/* Ensure the mask exists (you already have this) */
.home-grid .cell .img{ overflow:hidden; }

/* Base state */
.home-grid .cell.card .img img{
  opacity: .85;
  transform: scale(1);
  transform-origin: center;
  transition:
    transform var(--cine-zoom-duration) linear,
    opacity 180ms linear;
  will-change: transform;
  backface-visibility: hidden;
  /* transform: translateZ(0);  uncomment if you see jank */
}

/* Hover only when the MAIN link is hovered (img OR meta) */
.home-grid .cell.card > a:hover .img img,
.home-grid .cell.card > a:focus .img img{
  opacity: 1;
  transform: scale(var(--cine-zoom-scale));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .home-grid .cell.card .img img{
    transition: opacity 150ms linear;
    transform: none !important;
  }
}

/* --- BIG UPPERCASE TICKER --- */
.jd-ticker{
  --ticker-h: 50px;            /* strip height */
  --ticker-speed: 120s;        /* bigger = slower */
  display:block;
  width:100%;
  position:relative;
  z-index:5;
  text-decoration:none;        /* if it's an <a> */
  color: inherit;              /* color comes from inline style or parent */
}

/* viewport + track */
.jd-ticker-viewport{ height:var(--ticker-h); overflow:hidden; }
.jd-ticker-track{
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding-inline:10px;
  white-space:nowrap;
  will-change: transform;
  transition: color 1s ease;
  color: inherit;
}

/* BIG uppercase (≈ headline) */
.jd-ticker-item{
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 40px;
  line-height: var(--ticker-h);
  text-transform: uppercase;
}

/* Hover colour (works whether container is <a> or <div>) */
.jd-ticker:hover .jd-ticker-track{ color: var(--jd-mustard); }

/* Default: no scroll */
.jd-ticker .jd-ticker-track{ animation: none; }

/* Scroll only when "Ticker (scroll)" is checked */
.jd-ticker.is-ticker .jd-ticker-track{
  animation: jd-ticker-scroll var(--ticker-speed) linear infinite;
}

/* Pause-on-hover (optional) */
.jd-ticker.is-ticker:hover .jd-ticker-track{ animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .jd-ticker.is-ticker .jd-ticker-track{ animation: none !important; }
}

/* Required keyframes */
@keyframes jd-ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* duplicate message in markup for seamless loop */
}

.jd-ticker.is-ticker .jd-ticker-track{
  animation: jd-ticker-scroll var(--ticker-speed, 60s) linear infinite;
}


.jd-ticker.is-static .jd-ticker-viewport { text-align:center; }
.jd-ticker.is-static .jd-ticker-track   { animation:none; } /* already default, just explicit */

.jd-ticker{
  --ticker-h: 50px;
  display:block; width:100%; position:relative; z-index:5;
  text-decoration:none; color:inherit;
}
.jd-ticker-viewport{ height:var(--ticker-h); overflow:hidden; }
.jd-ticker-track{
  display:inline-flex; align-items:center; gap:20px;
  padding-inline:10px; white-space:nowrap; will-change:transform;
  transition: color 1s ease; color:inherit;
}
@keyframes jd-ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* ensure the message is duplicated in markup */
}