/* ==========================================================================
   HOME — styles specific to index.html only
   ========================================================================== */

/* ---- Orbit hero: big headline + floating category chips + subscribe card - */
.orbit-hero{
  position: relative;
  overflow: hidden;
  /* Floor raised from 3rem (48px) to 6.5rem (104px) — the header sits on
     top of this hero as a 76px bar (flush at all widths on mobile now;
     see the header-scroll override in components.css), and the old floor
     put the chip row/heading underneath or right against it at every
     width from mobile through tablet (only clearing it past ~1024px). */
  padding-block: clamp(6.5rem, 10vw, 7.5rem) clamp(3.5rem, 8vw, 6rem);
  isolation: isolate;
}
.orbit-hero__wash{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--accent) 16%, var(--bg)) 0%, transparent 70%),
    var(--bg);
}
[data-theme="dark"] .orbit-hero__wash{
  background:
    radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%),
    var(--bg);
}
.orbit-hero__dots{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 38%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 60% at 50% 38%, #000 0%, transparent 72%);
}
.orbit-hero__blob{
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background: color-mix(in srgb, var(--accent) 20%, var(--bg) 80%);
  filter: blur(2px);
}
[data-theme="dark"] .orbit-hero__blob{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.orbit-hero__blob--tl{ width: 260px; height: 260px; top: -80px; left: -80px; }
.orbit-hero__blob--br{ width: 300px; height: 300px; bottom: -100px; right: -100px; }

.orbit-hero__inner{
  position: relative;
  min-height: clamp(380px, 50vw, 520px);
  display: grid;
  place-items: center;
}
/* Purely a grouping hook for JS (data-orbit-chip-rail) — display:contents
   makes it fully transparent to the grid layout and to .orbit-chip's
   position:absolute (which still resolves against .orbit-hero__inner,
   the nearest positioned ancestor, exactly as before this wrapper was
   introduced). */
.orbit-chip-rail{ display: contents; }
.orbit-hero__heading{
  text-align: center;
  z-index: 2;
}
.orbit-hero__heading h1{
  font-size: var(--step-5);
  line-height: 1.02;
  max-width: 16ch;
  margin-inline: auto;
}

.orbit-hero__sub{
  color: var(--ink-soft);
  font-size: var(--step-1);
  max-width: 40ch;
  margin: 1rem auto 0;
}

.orbit-chip{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 118px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-text);
  z-index: 1;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* .orbit-chip sets display:flex, which otherwise beats the browser's
   default [hidden]{display:none} at equal specificity — same fix
   pattern used for .pill-form elsewhere on this site. Needed so a real
   chip stays invisible until orbit-chips-supabase.js actually has a
   category to put in it. */
.orbit-chip[hidden]{ display: none; }
.orbit-chip:hover{
  transform: translateY(-4px) scale(1.05);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--card-shadow-hover);
}
/* Skeleton state: same circle/position/size as .orbit-chip, but no
   hover lift (it's not a link yet) and no padding, so the inner
   .skel--circle can fill the whole shape edge-to-edge. */
.skel-orbit-chip{
  padding: 0;
  cursor: default;
}
.skel-orbit-chip:hover{
  transform: none;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.skel-orbit-chip .skel--circle{
  width: 100%;
  height: 100%;
}
.orbit-chip--1{ top: 6%;  left: 8%; }
.orbit-chip--2{ top: 40%; left: 1%; width: 140px; }
.orbit-chip--3{ bottom: 8%; left: 15%; }
.orbit-chip--4{ top: 8%;  right: 7%; }
.orbit-chip--5{ top: 42%; right: 1%; width: 140px; }
.orbit-chip--6{ bottom: 10%; right: 13%; }

@media (max-width: 900px){
  .orbit-chip{ width: 90px; font-size: 0.75rem; }
  .orbit-chip--2, .orbit-chip--5{ width: 100px; }
}
@media (max-width: 700px){
  .orbit-hero__inner{ min-height: auto; padding-block: 1rem 0; }
  .orbit-chip{ display: none; }
  .orbit-hero__heading h1{ max-width: 12ch; }
}

/* ---- Hero: featured card full-width on its own row, 3-up row below ------- */
.hero-grid{
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero-grid .section-head{
  margin-top: calc(clamp(3rem, 6vw, 5.5rem) * 2 - clamp(1.75rem, 3.5vw, 2.75rem));
  margin-bottom: calc(35px - clamp(1.75rem, 3.5vw, 2.75rem));
}
.hero-grid .post-card--feature{
  background: transparent;
}
.hero-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* ---- Recent posts grid (same universal card, 3-up) ------------------------ */
.recent-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

/* ---- Featured (asymmetric) grid: big + stack, mirrors screenshot pattern - */
.featured-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.featured-side{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- About section --------------------------------------------------------- */
.about-section{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about-media{
  position: relative;
  aspect-ratio: 1/1;
}
.about-media img{
  position: absolute;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.about-media__main{
  width: 72%; height: 72%;
  top: 0; left: 0;
  z-index: 1;
}
.about-media__accent{
  width: 46%; height: 46%;
  bottom: 0; right: 0;
  z-index: 2;
  border: 5px solid var(--bg);
}
.about-copy .eyebrow{ margin-bottom: 0.9rem; }
.about-copy h2{
  font-size: var(--step-3);
  margin-bottom: 1.1rem;
  max-width: 16ch;
}
.about-copy p{
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

/* ---- Follow rail (image strip) --------------------------------------------- */
.follow-rail{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}
.follow-rail a{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: block;
}
.follow-rail img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.follow-rail a:hover img{ transform: scale(1.08); }
.follow-rail a::after{
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--accent) 0%, transparent);
  transition: background var(--dur) var(--ease);
}
.follow-rail a:hover::after{
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ---- Products section (digital goods) --------------------------------------
   "Preview Reveal" card: hovering the stage cycles through up to 3 gallery
   frames (dot indicator top-center) so browsing feels like flipping through
   the actual contents — good for visual products where more looking beats
   more reading. Plain body underneath: format/preview-count meta, title,
   then a price + text-CTA footer. Titles are never clipped — full name
   always shows, however long it is.

   Grid is 3-up, same as .articles-grid, so product cards read at the same
   scale as article cards site-wide instead of a cramped 4-up row. */
.product-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
/* Same [hidden]-vs-class-display specificity bug already fixed for
   .article-header/.product-header__badge: a class-level `display: grid`
   beats the browser's own [hidden] { display: none } rule at equal
   specificity. This base rule lives in home.css (loaded by every page
   that uses .product-grid — home, products, and profile), so the fix
   belongs here rather than duplicated in each page-specific stylesheet
   that happens to toggle a .product-grid's hidden state. products.css
   already carries its own copy of this override for the same reason. */
.product-grid[hidden]{
  display: none;
}
@media (max-width: 900px){
  .product-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .product-grid{ grid-template-columns: 1fr; }
}
.product-card{
  display: block;
  color: inherit;
  /* Grid items default to min-width: auto (≈ their content's max-content
     width), which lets a wide-enough footer row (price + pill CTA) refuse
     to shrink below its intrinsic width even in a 1fr track — that's what
     was pushing the skeleton/card past the column and out of the page.
     min-width: 0 lets the card (and everything in it) actually shrink to
     fit its grid column like a normal 1fr track is supposed to. */
  min-width: 0;
}

/* Preview stage */
.product-card__stage{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--bg-raised);
  transition: box-shadow var(--dur) var(--ease);
}
.product-card:hover .product-card__stage{ box-shadow: var(--card-shadow-hover); }
.product-card__frame{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.product-card__frame img{ width: 100%; height: 100%; object-fit: cover; }
.product-card__frame--active{ opacity: 1; }
.product-card__dots{
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
.product-card__dot{
  width: 16px; height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.4);
  transition: background var(--dur) var(--ease);
}
.product-card__dot--active{ background: #fff; }
.product-card__save{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 32px; height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20,20,26,0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product-card__save:hover{ transform: scale(1.08); }
.product-card__save svg{ width: 15px; height: 15px; }
.product-card__save.is-saved{
  background: var(--accent);
  color: var(--accent-ink);
}
.product-card__save.is-saved svg{ fill: var(--accent-ink); }

/* Body */
.product-card__body{ padding: 1rem 0.2rem 0; }
.product-card__meta-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  min-height: 1em;
}
.product-card__format{
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.product-card__meta-sep{ color: var(--hairline-strong); }
.product-card__count{ font-size: 0.6875rem; color: var(--ink-soft); }
.product-card__title{
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-text);
  margin: 0 0 0.6rem;
  /* Full title always shows, however long — this just keeps short and
     long titles in a row starting from the same baseline. */
  min-height: calc(1.35em * 1);
}
.product-card__footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.product-card__price-row{
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.product-card__price-now{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--ink-text);
}
.product-card__price-was{
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-decoration: line-through;
}
.product-card__cta-text{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-text);
  white-space: nowrap;
}
.product-card__cta-text svg{ width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.product-card:hover .product-card__cta-text svg{ transform: translateX(3px); }

/* ---- Newsletter panel: orbit-style background, no avatars ------------------ */
.newsletter-panel{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 6vw, 4rem);
  text-align: center;
  isolation: isolate;
}
.newsletter-panel__wash{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 55%, var(--bg) 100%),
    var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
[data-theme="dark"] .newsletter-panel__wash{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 55%, var(--bg) 100%),
    var(--bg);
}
.newsletter-panel__dots{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(65% 70% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(65% 70% at 50% 30%, #000 0%, transparent 75%);
}
.newsletter-panel__blob{
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg) 78%);
}
[data-theme="dark"] .newsletter-panel__blob{
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.newsletter-panel__blob--l{ width: 90px; height: 90px; top: 18%; left: 6%; }
.newsletter-panel__blob--r{ width: 70px; height: 70px; top: 62%; right: 9%; }

.newsletter-panel__title{
  font-size: var(--step-3);
  max-width: 20ch;
  margin-inline: auto;
}
.newsletter-panel__sub{
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0.9rem auto 0;
}
.newsletter-panel .newsletter-note{ color: var(--ink-mute); }
.newsletter-panel .newsletter-note[data-state="success"]{ color: #B98600; }
[data-theme="dark"] .newsletter-panel .newsletter-note[data-state="success"]{ color: var(--accent); }
.newsletter-panel .newsletter-note[data-state="error"]{ color: #d9534f; }

/* ---- Pill form: standalone email-capture pill, no shared inheritance --- */
/* [hidden]-vs-class-display fix, same pattern used throughout this project
   (.purchase-list, .whatsapp-promo, etc.): a class-level `display` beats
   the UA [hidden]{display:none} rule at equal specificity, so this must be
   stated explicitly or js/newsletter.js hiding a subscribed form would be
   silently overridden by .pill-form's own `display: flex` below. */
.pill-form[hidden]{
  display: none;
}
.pill-form{
  display: flex;
  align-items: stretch;
  margin: 1.75rem auto 0;
  max-width: 400px;
  background: var(--card-bg);
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.pill-form input[type="email"]{
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ink-text);
  padding: 0.85rem 1rem 0.85rem 1.2rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.2;
}
.pill-form input[type="email"]::placeholder{ color: var(--ink-mute); }
.pill-form button{
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0.3rem 0.3rem 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill-form button svg{ width: 13px; height: 13px; }
.pill-form button:hover{
  background: var(--accent);
  color: var(--accent-ink);
}

@media (max-width: 480px){
  .pill-form input[type="email"]{
    padding: 0.7rem 0.6rem 0.7rem 0.9rem;
    font-size: 0.8rem;
  }
  .pill-form button{
    padding: 0.55rem 0.85rem;
    font-size: 0.72rem;
  }
  .pill-form button svg{ width: 12px; height: 12px; }
}

/* ---- Section rhythm --------------------------------------------------------- */
.section{ padding-block: clamp(3rem, 6vw, 5.5rem); }
/* divider removed between sections */
.section--tight-top{ padding-top: clamp(1rem, 2.5vw, 1.75rem); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px){
  .hero-row{ grid-template-columns: 1fr 1fr; }
  .featured-grid{ grid-template-columns: 1fr; }
  .recent-grid{ grid-template-columns: 1fr 1fr; }
  .product-grid{ grid-template-columns: 1fr 1fr; }
  .about-section{ grid-template-columns: 1fr; }
  .about-media{ max-width: 420px; }
  .follow-rail{ grid-template-columns: repeat(4, 1fr); }
  .post-card--feature{ flex-direction: column; align-items: stretch; }
  .post-card--feature .post-card__media{ width: 100%; max-width: none; }
}

@media (max-width: 600px){
  .hero-row{ grid-template-columns: 1fr; }
  .recent-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .follow-rail{ grid-template-columns: repeat(3, 1fr); }
}