/* Core theme (burgundy, green, beige) */
:root{
  --burgundy-900:#4F0F1F; --burgundy-800:#651726; --burgundy-700:#7A1E2C;
  --green-700:#2F6B3A; --green-600:#3C7F49;
  --beige-100:#F5F0E6; --beige-200:#E9E2D0;
  --text:#1A1C1E; --muted:#60646F;
  --surface:#FFFFFF; --surface-2:#FAFAFB; --border:#E5E7EB;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius-xl:1.25rem; --radius-lg:.9rem; --radius-md:.6rem;
  --space-1:.35rem; --space-2:.6rem; --space-3:.9rem; --space-4:1.2rem; --space-5:1.6rem; --space-6:2.2rem; --space-7:3rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
}
@media (prefers-color-scheme: dark){
  :root{ --text:#ECEEF3; --muted:#B1B5BF; --surface:#17181B; --surface-2:#1E2024; --border:rgba(255,255,255,.12); --beige-200:#141516; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--beige-200);color:var(--text);font-family:var(--font-sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid color-mix(in oklab, var(--green-700) 75%, white);outline-offset:2px;border-radius:.25rem}

/* put this AFTER a inherit rule */
a {
  color: var(--link, #2F6B3A);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover,
a:focus {
  text-decoration-thickness: 2px;
}
a:visited {
  color: var(--link-visited, #7A1E2C);
}
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root { --link: #7ab0ff; --link-visited: #b79cff; }
}

/* Header / nav */
.header{background:var(--surface);border-bottom:1px solid var(--border)}
.header-inner{max-width:1200px;margin:0 auto;padding:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:.8rem;font-weight:800}
.logo{width:40px;height:40px;border-radius:10px;background:conic-gradient(from 140deg, var(--burgundy-800), var(--green-600));box-shadow:0 4px 14px rgba(0,0,0,.12)}
.site-name{font-size:1.15rem}
.navbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:.6rem var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-link{padding:.55rem .9rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);transition:transform .12s ease, box-shadow .12s ease}
.nav-link:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.nav-link.is-primary{background:var(--green-600);color:white;border-color:transparent}
.nav-link.is-accent{background:var(--burgundy-700);color:white;border-color:transparent}
.search{display:flex;gap:.5rem;align-items:center}
.input{width:100%;padding:.7rem .9rem;border-radius:.7rem;border:1px solid var(--border);background:var(--surface-2)}
.input:focus{border-color:color-mix(in oklab, var(--green-700) 60%, var(--border))}
.btn{padding:.7rem 1rem;border-radius:.9rem;border:1px solid var(--border);background:var(--surface-2);display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--green-600);color:white;border-color:transparent}
.btn.accent{background:var(--burgundy-700);color:white;border-color:transparent}

/* Layout */
.layout{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-4);display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width: 992px){ .layout{grid-template-columns:minmax(0,1fr) 280px} }
.content{display:grid;gap:1.5rem}
.sidebar{position:sticky;top:1rem;align-self:start;display:grid;gap:1rem}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.cat-list a{display:block;padding:.5rem .75rem;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}
.cat-list a:hover{background:#eef5ef;border-color:#d5e7d9}

/* Sections & cards */
.section{display:grid;gap:var(--space-4)}
.grid-toolbar{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-media{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:linear-gradient(135deg, var(--burgundy-700), var(--green-600))}
.card-body{padding:var(--space-4);display:grid;gap:.5rem}
.card-title{margin:0;font-weight:800}
.card-caption{color:var(--muted);font-size:.95rem}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--surface)}
.footer-inner{max-width:1200px;margin:0 auto;padding:var(--space-5) var(--space-4);display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted)}

/* Uniform 4:3 media frame showing full image */
.card-media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--burgundy-700), var(--green-600));
  border: 1px solid var(--border);
  border-bottom: none;
  overflow: hidden;
}

/* The actual image is centered and scaled down to fit */
.card-media > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show entire image, letterboxed if needed */
  background: transparent;
  display: block;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.pagination .page,
.pagination span.page {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  font-size: 0.95rem;
  background-color: var(--color-light, #f3f3f3);
  border: 1px solid var(--color-dark, #ccc);
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-darkest, #333);
  transition: all 0.2s ease-in-out;
}

.pagination .page:hover {
  background-color: var(--color-dark, #7a1e2c);
  color: #fff;
  border-color: var(--color-dark, #7a1e2c);
}

.pagination .is-current {
  background-color: var(--color-green, #2f6d3b);
  border-color: var(--color-green, #2f6d3b);
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}
/* Keep the Like button aligned and prevent layout shift */
.fb-like-wrap{
  display:flex; align-items:center; justify-content:center;
  min-width: 138px; min-height: 32px; /* reserves space while SDK loads */
}

/* Optional: hide on very small screens to keep nav tidy */
@media (max-width:520px){
  .fb-like-wrap{ display:none; }
}


/* Remove any accidental empty sections/grids */
.section:empty { display: none; }
.card-grid:empty { display: none; }

/* Ensure the first section in .content starts flush */
.content > .section:first-child { margin-top: 0; padding-top: 0; }

/* Guard against accidental tall placeholders before results */
.card-grid:empty { display: none; }

/* Kill any accidental top spacing after the nav */
.header { margin-bottom: 0; }
.navbar { margin-bottom: 0; }

/* Make sure the first content section starts flush */
main.layout { margin-top: 0; padding-top: var(--space-4); }
.content > .section:first-child { margin-top: 0; padding-top: 0; }

/* If something empty renders before results, hide it */
.section:empty { display: none; }
.card-grid:empty { display: none; }

/* h1 top margins shouldn’t create huge gaps at the top */
.content > .section:first-child h1:first-child { margin-top: 0; }

/* Make the seam between nav and main flush */
.header{ margin-bottom:0; }
.navbar{ margin-bottom:0; }

/* Kill any top gap after the navbar */
.navbar + main.layout { margin-top:0 !important; padding-top: var(--space-4); }
.navbar + main.layout > .content { padding-top:0; }
.navbar + main.layout > .content > .section:first-child { margin-top:0; padding-top:0; }

/* First H1 shouldn’t push the page down */
.navbar + main.layout h1:first-child { margin-top:0; }

/* DEBUG: turn off sticky to test */
.navbar { position: static !important; }

/* Pack grid rows at the top so free space goes to the bottom */
.content { display: grid; gap: 1.5rem; align-content: start; }   /* add align-content */
.section { display: grid; gap: var(--space-4); align-content: start; } /* add align-content */


/* Scoped styles for countdown + 6-card grid */
.hero {
  background: radial-gradient(120% 120% at 10% 0%, #e7f0ff 0%, #f8fbff 40%, #ffffff 70%),
              linear-gradient(135deg, rgba(255,0,0,.06), rgba(0,128,0,.06));
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.07);
  margin: 1rem 0 1.5rem;
}
.hero h1 { margin:0 0 .5rem; font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.hero p { margin:.25rem 0; color: var(--muted, #374151); }

.countdown { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.cd-card {
  flex:1 1 110px; min-width:110px; text-align:center;
  padding:.75rem .5rem; border-radius:14px;
  border:1px solid var(--border, #e5e7eb);
  background:rgba(255,255,255,.75); backdrop-filter: blur(4px);
  position:relative; overflow:hidden;
}
.cd-num { font-size:clamp(1.6rem, 4vw, 2rem); font-weight:800; line-height:1; }
.cd-lab { font-size:.85rem; color:#6b7280; margin-top:.35rem; text-transform:uppercase; letter-spacing:.04em; }
.cd-card::after {
  content:""; position:absolute; inset:-40%;
  background: conic-gradient(from 0deg, transparent 0 340deg, rgba(255,215,0,.25) 360deg);
  transform: rotate(0deg); animation: spin 8s linear infinite; mix-blend-mode: overlay; pointer-events:none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 6-card grid reusing your .card-grid styles; adjust heights for consistency */
.grid-6 { display:grid; gap:.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px){ .grid-6 { grid-template-columns: repeat(3, 1fr); } }
.card-media img { width:100%; height:220px; object-fit:cover; display:block; }
.card:hover { transform: translateY(-2px); transition: transform .18s ease; }

:root{ --xmas-red:#B91C1C; --xmas-green:#166534; }
.countdown-title{
  margin:.5rem 0 .4rem;
  font-weight:700;
  letter-spacing:.01em;
}
.cd-card:nth-child(odd)  .cd-num{ color:var(--xmas-red); }
.cd-card:nth-child(even) .cd-num{ color:var(--xmas-green); }

/* optional: subtle colored borders too */
.cd-card:nth-child(odd){  border-color: rgba(185,28,28,.25); }
.cd-card:nth-child(even){ border-color: rgba(22,101,52,.25); }

/* Keep the gradient frame from Option A */
.card-media.media-full{
  --media-pad: clamp(10px, 2vw, 18px);   /* we’ll reuse this below */
  aspect-ratio: auto;
  background: linear-gradient(135deg, var(--burgundy-700), var(--green-600));
  padding: var(--media-pad);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Scale the image down to fit the viewport nicely */
.card-media.media-full > img{
  position: static;
  display: block;
  width: auto;                 /* allow height-based scaling */
  max-width: 100%;             /* never wider than the card */
  height: auto;
  /* key line: cap by viewport height (minus the frame padding) */
  max-height: calc(78vh - var(--media-pad) * 2);
  margin: 0 auto;              /* center horizontally */
  object-fit: contain;
  background: transparent;
}

/* Optional: a bit smaller on small screens */
@media (max-width: 640px) {
  .card-media.media-full > img{
    max-height: calc(68vh - var(--media-pad) * 2);
  }
}

/* Optional: keep the figure responsively sized and centered */
figure.card{
  max-width: clamp(320px, 92vw, 880px);
  margin-inline: auto;
}

/* --- View page (desktop/laptop): show at natural size unless it would overflow --- */
@media (min-width: 1024px) {

  /* Let the figure size itself to the image; only cap by viewport width */
  figure.card{
    width: fit-content;
    max-width: 96vw;         /* safety so it doesn't run off screen */
    margin-inline: auto;
  }

  .card-media.media-full{
    --media-pad: clamp(10px, 2vw, 18px);
    padding: var(--media-pad);
    /* keep your gradient/background/border from Option A */
  }

.card-media.media-full > img{
  width: auto;             /* use natural width */
  max-width: 100%;         /* but don't exceed the container */
  height: auto;
  max-height: calc(85vh - var(--media-pad) * 2);
  margin: 0 auto;
  object-fit: contain;
}

/* ensure the container itself doesn’t exceed the viewport */
@media (min-width: 1024px){
  figure.card{ width: fit-content; max-width: 96vw; margin-inline: auto; }
}


/* On smaller screens we still keep a viewport cap so it’s usable */
@media (max-width: 1023.98px){
  figure.card{ max-width: 94vw; margin-inline:auto; }
  .card-media.media-full > img{
    width: auto; max-width: 100%;
    max-height: calc(68vh - var(--media-pad, 12px) * 2);
  }
}