/* ============================================================================
   ALPEKIN ACADEMY — Front / Home (Premium v3.3)
   - Three blocks: Latest / Themes / Categories
   - Section bars + separators
   - Token-driven (only your palette & scales)
   ============================================================================ */

/* Page background (brand parchment) */
body {
  background:
    radial-gradient(1400px 800px at 80% -10%,
      color-mix(in srgb, var(--tree-gold) 12%, transparent), transparent 55%),
    radial-gradient(1200px 900px at -10% 110%,
      color-mix(in srgb, var(--deep-moss) 10%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ivory-bone) 92%, white) 0%,
      color-mix(in srgb, var(--moon-ash) 25%, var(--ivory-bone)) 100%);
  color: var(--bone-black);
}

/* Home container */
.academy-home {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
  padding-block: clamp(var(--space-7), 6vw, var(--space-10));
  background:
    radial-gradient(1200px 800px at 70% -10%,
      color-mix(in srgb, var(--tree-gold) 10%, transparent), transparent 60%),
    radial-gradient(900px 700px at -10% 120%,
      color-mix(in srgb, var(--deep-moss) 12%, transparent), transparent 60%);
}

/* Header (contains only Explore callout) */
.academy-home__header { margin: 0 0 clamp(var(--space-6), 4vw, var(--space-8)); }

/* Explore callout (full width) */
.explore-callout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(var(--space-4), 2.5vw, var(--space-7));
  align-items: center;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--moon-ash) 55%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ivory-bone) 78%, white) 0%,
      color-mix(in srgb, var(--ivory-bone) 65%, white) 100%);
  box-shadow: var(--shadow-md);
}
.explore-callout__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-heading-tight);
  color: var(--deep-moss);
  font-size: clamp(var(--fs-h2), 1.4vw + 1rem, calc(var(--fs-h2) + 4px));
  line-height: var(--lh-h2);
}
.explore-callout__text {
  margin: 0;
  color: color-mix(in srgb, var(--bone-black) 70%, transparent);
  font-size: clamp(var(--fs-small), .5vw + .9rem, var(--fs-body));
}
.explore-callout__actions { display: flex; align-items: center; gap: var(--space-3); }

.btn-explore {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-interactive);
  border: 1px solid color-mix(in srgb, var(--tree-gold) 35%, transparent);
  background: color-mix(in srgb, var(--tree-gold) 28%, var(--ivory-bone));
  color: var(--dark-soil);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);
}
.btn-explore:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--tree-gold) 34%, var(--ivory-bone)); box-shadow: var(--shadow-md); }
.btn-explore:focus-visible { outline: 2px solid var(--tree-gold); outline-offset: 2px; box-shadow: var(--accent-gold-glow), var(--shadow-sm); }

/* ======================
   Section bars & separators
   ====================== */
.section-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(var(--space-3), 1.2vw, var(--space-4)) clamp(var(--space-4), 2vw, var(--space-6));
  margin: clamp(var(--space-6), 4vw, var(--space-8)) 0 var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ivory-bone) 70%, white);
  border: 1px solid color-mix(in srgb, var(--moon-ash) 55%, transparent);
  box-shadow: var(--shadow-sm);
}
.section-bar__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-heading-tight);
  color: var(--deep-moss);
  font-size: clamp(var(--fs-h3), 0.8vw + 1rem, var(--fs-h2));
  line-height: var(--lh-h3);
}

/* Thin ornamental separator between the three blocks */
.block-sep {
  height: 10px;
  margin: clamp(var(--space-7), 4vw, var(--space-9)) 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--tree-gold) 70%, transparent),
      color-mix(in srgb, var(--sacred-copper) 70%, transparent) 40%,
      color-mix(in srgb, var(--deep-moss) 70%, transparent) 100%);
  border-radius: 999px;
  opacity: .45;
}

/* ======================
   Block 1 — Latest (grid of standard cards)
   ====================== */
.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(var(--space-4), 2.2vw, var(--space-7));
}
.posts > li { grid-column: span 4; }
@media (max-width: 1024px) { .posts > li { grid-column: span 6; } }
@media (max-width: 640px)  { .posts > li { grid-column: 1 / -1; } }

.posts:empty::before {
  content: "No published articles yet.";
  display: block;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  color: color-mix(in srgb, var(--deep-moss) 65%, transparent);
  border: 1px dashed color-mix(in srgb, var(--moon-ash) 55%, transparent);
  background: color-mix(in srgb, var(--ivory-bone) 40%, white);
  text-align: center;
}

/* Standard dark card */
.post-card {
  --card-sep: color-mix(in srgb, var(--moon-ash) 22%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dark-soil) 86%, black),
      color-mix(in srgb, var(--dark-soil) 94%, black));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: clip;
  min-height: 100%;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), outline-color var(--ease-standard);
}
.post-card::before { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px var(--card-sep); pointer-events:none; }
.post-card::after  { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--tree-gold), var(--sacred-copper)); opacity:.85; }
.post-card:where(:hover,:focus-within){ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.post-card__link { display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:inherit; min-height:100%; outline:none; isolation:isolate; border-radius:inherit; }
.post-card__link:focus-visible { outline: 2px solid var(--tree-gold); outline-offset: 4px; box-shadow: var(--accent-gold-glow); }

.post-card__cover { aspect-ratio:16/9; background: var(--ivory-bone); position:relative; overflow:hidden; }
.post-card__cover img { width:100%; height:100%; object-fit:cover; transform:scale(1.001); transition: transform var(--ease-slow), filter var(--ease-slow); }
.post-card__cover::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 10%, color-mix(in srgb, var(--tree-gold) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--dark-soil) 22%, transparent) 100%);
  mix-blend-mode:multiply; pointer-events:none; transition: opacity var(--ease-standard); opacity:.85;
}
.post-card:where(:hover,:focus-within) .post-card__cover img { transform:scale(1.03); filter:saturate(1.02); }
.post-card:where(:hover,:focus-within) .post-card__cover::after { opacity:1; }

.post-card__content {
  padding: clamp(var(--space-5), 2vw, var(--space-6));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dark-soil) 88%, black) 0%,
    color-mix(in srgb, var(--dark-soil) 94%, black) 100%);
  color: var(--ivory-bone);
  border-top: 1px solid var(--card-sep);
}
.post-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--fs-h3), 0.6vw + 1rem, calc(var(--fs-h3) + 2px));
  line-height: var(--lh-h3);
  color: var(--ivory-bone);
  letter-spacing: var(--ls-heading-tight);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bone-black) 35%, transparent);
  transition: color var(--ease-standard), text-shadow var(--ease-standard);
}
.post-card__link:where(:hover,:focus-visible) .post-card__title {
  color: var(--tree-gold);
  text-shadow: 0 0 0 transparent, 0 0 24px color-mix(in srgb, var(--tree-gold) 35%, transparent);
}

/* ======================
   Blocks 2 & 3 — Lanes
   ====================== */
.section { margin-top: clamp(var(--space-8), 5vw, var(--space-12)); }
.section__head { display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.section__title {
  margin:0; color: var(--deep-moss);
  font-family: var(--font-heading); letter-spacing: var(--ls-heading-tight);
  font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem);
}
.section__title a { color: inherit; text-decoration: none; }
.section__title a:hover { text-decoration: underline; }
.section__more { color: var(--tree-gold); font-weight: var(--weight-semibold); }

/* Single-row carousel */
.hscroll {
  display:grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 320px);
  gap: clamp(var(--space-3), 2vw, var(--space-5));
  overflow-x:auto; padding-block: var(--space-2);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.hscroll > * { scroll-snap-align: start; }

/* Compact lane cards */
.lane-card {
  background: color-mix(in srgb, var(--ivory-bone) 60%, white);
  border: 1px solid color-mix(in srgb, var(--moon-ash) 55%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard);
}
.lane-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lane-card__link { display:block; color:inherit; text-decoration:none; }
.lane-card__cover { aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--moon-ash) 20%, var(--ivory-bone)); }
.lane-card__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.lane-card__title { margin: 8px 10px 10px; color: var(--dark-soil); font-size: 0.95rem; line-height: 1.3; font-weight: var(--weight-medium); }

/* ======================
   Full-screen Explore modal
   ====================== */
html.no-scroll, html.no-scroll body { overflow: hidden; }
.explore-modal { border: 0; padding: 0; background: transparent; }
.explore-modal::backdrop { background: rgba(0,0,0,.72); }
.explore-modal--fullscreen { width: 100vw; height: 100vh; }
.explore-modal--fullscreen .explore-modal__body {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--ivory-bone); color: var(--bone-black);
  box-shadow: var(--shadow-lg);
}
.explore-modal__close {
  position: fixed; top: 16px; right: 16px; z-index: 1100;
  width: 40px; height: 40px;
  border: 1px solid color-mix(in srgb, var(--moon-ash) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--moon-ash) 16%, var(--ivory-bone));
  color: var(--bone-black);
  font-size: 24px; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);
}
.explore-modal__close:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--moon-ash) 22%, var(--ivory-bone)); box-shadow: var(--shadow-md); }
.explore-modal__close:focus-visible { outline: 2px solid var(--tree-gold); outline-offset: 2px; box-shadow: var(--accent-gold-glow); }
.explore-modal__loading { padding: 16px; font-weight: var(--weight-medium); }
.explore-modal__content { overflow: auto; padding: 10px 12px 20px; height: 100%; }
.explore-modal__content main, .explore-modal__content .container, .explore-modal__content .page { max-width: var(--container-max); margin-inline: auto; }

/* A11Y & motion */
:focus-visible { outline: 2px solid var(--tree-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Scrollbar polish */
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--moon-ash) 25%, var(--ivory-bone)); border-radius: 999px; }
.hscroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tree-gold) 60%, transparent);
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--ivory-bone) 50%, white);
}

/* Responsive tweaks */
@media (max-width: 880px) {
  .explore-callout { grid-template-columns: 1fr; }
  .explore-callout__actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .academy-home { padding-inline: var(--space-4); }
  .section__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}