/* =====================================================================
   MODULE STYLES: HOME  (home/home.css)
   Layout for the home page sections only. Shared pieces (buttons,
   kicker, section head, cards) come from theme/ and components/.
   ===================================================================== */

/* ---- 1. HERO ------------------------------------------------------ */
.bk-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
/* spots fade out behind the text side, stay visible behind the goat */
.bk-hero > .bk-spot-field--field { -webkit-mask-image: linear-gradient(to right, transparent 25%, #000 75%); mask-image: linear-gradient(to right, transparent 25%, #000 75%); }
html[dir="rtl"] .bk-hero > .bk-spot-field--field { -webkit-mask-image: linear-gradient(to left, transparent 25%, #000 75%); mask-image: linear-gradient(to left, transparent 25%, #000 75%); }
.bk-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.bk-hero__text { display: grid; gap: var(--bk-space-4); justify-items: start; }
.bk-hero__title { font-size: var(--bk-step-4); max-width: 12ch; }
html[lang="ur"] .bk-hero__title { max-width: 14ch; line-height: 1.6; }
.bk-hero__lead { max-width: 34rem; color: var(--bk-ink-soft); font-size: var(--bk-step-1); line-height: 1.6; }
html[lang="ur"] .bk-hero__lead { line-height: 2.1; }
.bk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bk-space-3); }
.bk-hero__note { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }

/* The goat "stage": a mounted card like a gallery print */
.bk-hero__stage {
  position: relative; padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2.5rem) var(--bk-space-4);
  background: radial-gradient(110% 80% at 50% 100%, var(--bk-cream) 0%, #f5eee2 50%, var(--bk-milk) 100%);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-lift);
}
.bk-hero__stage::before { /* inner mount line */
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--bk-line); border-radius: calc(var(--bk-radius-lg) - 8px); pointer-events: none;
}
/* Real goat photo fused into the stage:
   - multiply blend turns the photo's pure-white background into the stage colour
   - the mask softly fades the bottom and right edges where the body runs out of frame
   - the stage becomes a flat sugar tone so there is no visible photo edge */
.bk-hero__stage:has(.bk-hero__photo) { background: var(--bk-sugar); padding-bottom: var(--bk-space-3); }
.bk-hero__photo {
  display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%), linear-gradient(to left, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%), linear-gradient(to left, transparent 0%, #000 22%);
  mask-composite: intersect;
}
.bk-hero__caption {
  display: flex; align-items: center; gap: var(--bk-space-2); justify-content: center;
  margin-top: var(--bk-space-2); color: var(--bk-ink-soft); font-size: var(--bk-step--1);
}
.bk-hero__caption .bk-spot-field--badge { width: 22px; }

/* ---- 2. THE BREED -------------------------------------------------- */
.bk-traits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bk-space-4); }
.bk-trait {
  display: grid; align-content: start; gap: var(--bk-space-2);
  padding: var(--bk-space-4); border-top: 2px solid var(--bk-ink);
}
.bk-trait__num { font-family: var(--bk-font-display); color: var(--bk-tan); font-size: var(--bk-step-1); }
.bk-trait h3 { font-size: var(--bk-step-1); }
.bk-trait p { color: var(--bk-ink-soft); }

.bk-signatures {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--bk-space-5);
  margin-top: var(--bk-space-6); padding: var(--bk-space-5);
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg);
}
.bk-signatures__text { display: grid; gap: var(--bk-space-2); max-width: 30rem; }
.bk-signatures__text h3 { font-size: var(--bk-step-2); }
.bk-signatures__text p { color: var(--bk-ink-soft); }
.bk-signatures__list { display: flex; gap: var(--bk-space-4); }
.bk-signature { display: grid; justify-items: center; gap: var(--bk-space-2); color: var(--bk-ink-soft); font-size: var(--bk-step--1); }
.bk-signature .bk-spot-field--badge { width: clamp(72px, 60px + 3vw, 110px); }

/* ---- 3. GOAT GALLERY ---------------------------------------------- */
.bk-goats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bk-space-4); flex-wrap: wrap; }
.bk-goats__head .bk-btn { margin-bottom: var(--bk-space-5); }
.bk-goats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-4); }

/* ---- 4. FOUR SIDES ------------------------------------------------- */
.bk-sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bk-space-3); }
.bk-side__frame {
  position: relative; display: grid; gap: var(--bk-space-2);
  padding: var(--bk-space-4) var(--bk-space-3) var(--bk-space-3);
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
}
/* camera-frame corner ticks */
.bk-side__frame::before, .bk-side__frame::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--bk-tan);
}
.bk-side__frame::before { top: 10px; inset-inline-start: 10px; border-inline-end: 0; border-bottom: 0; }
.bk-side__frame::after { bottom: 44px; inset-inline-end: 10px; border-inline-start: 0; border-top: 0; }
.bk-side__frame figcaption { text-align: center; font-weight: 600; font-size: var(--bk-step--1); color: var(--bk-ink-soft); }
html[lang="ur"] .bk-side__frame figcaption { font-size: var(--bk-step-0); }

/* ---- 5. OFFERS ----------------------------------------------------- */
.bk-offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.bk-offer-modes { display: grid; gap: var(--bk-space-3); }
.bk-offer-modes li {
  display: grid; gap: var(--bk-space-2); justify-items: start;
  padding: var(--bk-space-4); background: var(--bk-sugar); border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
}
.bk-offer-modes p { color: var(--bk-ink-soft); }

/* Ledger card: an example open-offer history */
.bk-ledger {
  position: sticky; top: calc(var(--bk-header-h) + 24px);
  padding: var(--bk-space-4); background: var(--bk-sugar);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow-lift);
}
.bk-ledger__top { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--bk-space-3); }
.bk-ledger__top .bk-goat-art { background: var(--bk-cream); border-radius: var(--bk-radius); padding: 6px; }
.bk-ledger__title { font-family: var(--bk-font-display); font-size: var(--bk-step-1); margin-bottom: var(--bk-space-2); }
.bk-ledger__sum { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-3); margin: var(--bk-space-4) 0; }
.bk-ledger__sum div { padding: var(--bk-space-3); background: var(--bk-milk); border-radius: var(--bk-radius-sm); }
.bk-ledger__sum dt { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }
.bk-ledger__sum dd { margin: 0; font-family: var(--bk-font-display); font-size: var(--bk-step-1); font-weight: 600; }
.bk-ledger__sum dd.is-top { color: var(--bk-olive); }
.bk-ledger__list { display: grid; }
.bk-ledger__row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--bk-space-3);
  padding: 0.7rem 0; border-top: 1px dashed var(--bk-line); font-size: var(--bk-step--1);
}
.bk-ledger__who { font-weight: 600; }
.bk-ledger__when { color: var(--bk-ink-faint); }
.bk-ledger__amt { font-size: var(--bk-step-0); }
.bk-ledger__row.is-top .bk-ledger__amt { color: var(--bk-olive); }

/* ---- 6. SELL (dark band for rhythm) -------------------------------- */
.bk-sell { background: var(--bk-ink); color: var(--bk-milk); overflow: hidden; }
.bk-sell .bk-spot-field--field { opacity: 0.35; filter: invert(1); }
.bk-sell__inner { position: relative; z-index: 1; display: grid; justify-items: start; }
.bk-sell .bk-kicker { color: var(--bk-tan-soft); }
.bk-sell .bk-kicker::before { background: var(--bk-milk); }
.bk-sell .bk-section-head p { color: rgba(255, 253, 248, 0.72); }
.bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-4); width: 100%; margin-bottom: var(--bk-space-5); }
.bk-steps li { display: grid; gap: var(--bk-space-2); align-content: start; padding-top: var(--bk-space-4); border-top: 1px solid rgba(255, 253, 248, 0.2); }
.bk-steps__num { font-family: var(--bk-font-display); font-size: var(--bk-step-3); color: var(--bk-tan-soft); line-height: 1; }
.bk-steps h3 { font-size: var(--bk-step-1); }
.bk-steps p { color: rgba(255, 253, 248, 0.72); }

/* ---- 7. PROUDLY LOCAL --------------------------------------------- */
.bk-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bk-space-4); }
.bk-values li {
  display: grid; gap: var(--bk-space-2); align-content: start; padding: var(--bk-space-4);
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
}
.bk-values h3 { font-size: var(--bk-step-1); }
.bk-values p { color: var(--bk-ink-soft); }

/* ---- 8. Responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .bk-traits, .bk-values { grid-template-columns: repeat(2, 1fr); }
  .bk-goats__grid { grid-template-columns: repeat(2, 1fr); }
  .bk-sides { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .bk-hero__grid, .bk-offers { grid-template-columns: 1fr; }
  .bk-ledger { position: static; }
  .bk-signatures { grid-template-columns: 1fr; }
  .bk-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bk-traits, .bk-values, .bk-goats__grid { grid-template-columns: 1fr; }
  .bk-signatures__list { gap: var(--bk-space-3); }
  .bk-ledger__top { grid-template-columns: 90px 1fr; }
}