:root { --gold:#ffd700; --text:#f5f5f5; }
body { margin:0; background:#0b0b0b; color:var(--text); }
.blog-nav {
    position: sticky; top: 0; z-index: 10;
    display:flex; gap:12px; align-items:center; padding:14px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.65));
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.blog-nav a { color: var(--text); text-decoration: none; font-weight: 700; }
.blog-nav a:hover { color: var(--gold); }

.wrap {
    max-width: 1200px; margin: clamp(24px,4vw,54px) auto; padding: 0 3vw;
}
h1 { margin: 0 0 10px; }
.lead { color: rgba(255,255,255,.75); margin:0 0 24px; }

.grid {
    display:grid; gap: clamp(16px,2vw,24px);
    grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1000px){ .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid { grid-template-columns: 1fr; } }

.card {
    display:grid; grid-template-rows: auto auto 1fr auto;
    border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.card .thumb { aspect-ratio: 16/9; background:#111; }
.card img { width:100%; height:100%; object-fit: cover; display:block; }
.card .body { padding:14px 16px; }
.card h3 { margin:6px 0 8px; font-size:1.1rem; color:#fff; }
.card p { margin:0 0 10px; color: rgba(255,255,255,.8); }
.card .meta { color: rgba(255,255,255,.6); font-size:.9rem; }
.card .cta {
    margin: 12px 16px 16px; align-self:end;
    display:inline-flex; gap:8px; align-items:center;
    text-decoration:none; color:#000; background:var(--gold);
    padding:10px 14px; border-radius:10px; font-weight:800;
    box-shadow: 0 10px 22px rgba(255,215,0,.18);
}
.card .cta:hover { filter:brightness(1.05); }
/* Match media-button’s white-on-hover effect for blog buttons */
.foot-nav a,
.card .cta {
position: relative;
overflow: hidden;
z-index: 1;
/* keep your existing look */
background: #FFD700;
color: #000;
text-decoration: none;
border-radius: 10px;
font-weight: 800;
box-shadow: 0 10px 22px rgba(255,215,0,.18);
transition: filter .2s ease, transform .12s ease, box-shadow .2s ease;
}

/* white flip overlay */
.foot-nav a::before,
.card .cta::before {
content: '';
position: absolute;
inset: 0;
background: #FFFFFF;
transform: perspective(500px) rotateX(-90deg);
transform-origin: top;
transition: transform .3s ease;
z-index: -1;
}

/* on hover/focus: reveal white and keep black text like .media-button */
.foot-nav a:hover::before,
.foot-nav a:focus-visible::before,
.card .cta:hover::before,
.card .cta:focus-visible::before {
transform: perspective(500px) rotateX(0deg);
}
.foot-nav a:hover,
.foot-nav a:focus-visible,
.card .cta:hover,
.card .cta:focus-visible {
color: #000;
text-shadow: 0 0 2px rgba(255,255,255,0.5);
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(255,215,0,.24);
filter: none;
}

/* === Blog carousel: single-row (3-up desktop / 2 tablet / 1 mobile) + View-all grid === */
.blog-index { position: relative; }
.blog-header { display: grid; gap: 8px; margin-bottom: 12px; }
.blog-controls { display: flex; gap: 10px; align-items: center; }

/* Controls (matches your media-button hover) */
.blog-arrow, .view-all {
  background: #FFD700; color: #000; border: 0; border-radius: 10px;
  padding: 10px 14px; font-weight: 800; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 10px 22px rgba(255,215,0,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.blog-arrow:hover, .view-all:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,215,0,.24); }
/* White-flip hover (media-button effect) */
.blog-arrow::before, .view-all::before {
  content: ''; position: absolute; inset: 0; background: #fff;
  transform: perspective(500px) rotateX(-90deg); transform-origin: top; transition: transform .3s ease; z-index: -1;
}
.blog-arrow:hover::before, .blog-arrow:focus-visible::before,
.view-all:hover::before, .view-all:focus-visible::before {
  transform: perspective(500px) rotateX(0deg);
}

/* Viewport: hides overflow in carousel mode */
.rail-viewport { overflow: hidden; }

/* === CAROUSEL MODE (single row, never wraps) === */
.blog-rail {
  --gap: clamp(16px, 2vw, 24px);
  --cols: 3;                               /* desktop default */
  --cardW: calc((100% - (var(--gap) * (var(--cols) - 1))) / var(--cols));

  display: flex !important;                /* defeat any .grid styles elsewhere */
  flex-wrap: nowrap !important;            /* force single row */
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.blog-rail > .card {
  flex: 0 0 var(--cardW);
  max-width: var(--cardW);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Optional: subtle scrollbar */
.blog-rail::-webkit-scrollbar { height: 8px; }
.blog-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }

/* Disable arrows at ends */
.blog-controls .prev[disabled],
.blog-controls .next[disabled] { opacity: .45; cursor: not-allowed; }

/* === VIEW-ALL MODE (classic multi-row grid) === */
.blog-index.is-view-all .rail-viewport { overflow: visible; }
.blog-index.is-view-all #blogRail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  overflow: visible;
  scroll-snap-type: none;
}
.blog-index.is-view-all .blog-controls .blog-arrow { display: none; }  /* hide arrows when expanded */

/* Responsive columns */
@media (max-width: 1000px) {
  .blog-rail { --cols: 2; }
  .blog-index.is-view-all #blogRail { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .blog-rail { --cols: 1; }
  .blog-index.is-view-all #blogRail { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blog-rail { scroll-behavior: auto; }
}

/* View-all: let cards fill the grid and hide loop clones */
.blog-index.is-view-all #blogRail > .card {
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  scroll-snap-align: unset !important;
}
.blog-index.is-view-all #blogRail > .card[data-clone="1"] {
  display: none !important;
}