/* BlingKitchen framed kitchen hero (Louis-approved option C, Oct 10 2026) */
.bkf-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  background:
    url("/amethyst/bling-kitchen/sparkle-desktop.svg") center top / 1440px 720px no-repeat,
    radial-gradient(ellipse at 72% 45%, #5a2788, #2a1340 70%);
}
.bkf-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 768px);
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  min-height: 720px;
  margin: 0 auto;
  padding: 72px 72px 72px 88px;
}
.bkf-hero-copy { min-width: 0; }
.bkf-hero .bkf-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #e7c27d;
  font: 600 12px/1 "DM Sans", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.bkf-hero .bkf-eyebrow::before { content: ""; width: 28px; height: 1px; background: #e7c27d; }
.bkf-hero h1 {
  margin: 16px 0 10px;
  color: #fff;
  font: 500 76px/1 "Playfair Display", Georgia, serif;
  letter-spacing: -0.01em;
}
.bkf-hero .bkf-tagline {
  margin: 0;
  color: #f3e3ff;
  font: italic 400 23px/1.3 "Playfair Display", Georgia, serif;
  white-space: nowrap;
}
.bkf-hero .bkf-sub {
  margin: 12px 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font: 400 17px/1.5 "DM Sans", sans-serif;
}
.bkf-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bkf-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 26px;
  border-radius: 999px;
  font: 600 15px/1 "DM Sans", sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.bkf-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #9b5de5, #6f2da8);
  box-shadow: 0 10px 28px rgba(111, 45, 168, 0.45);
}
.bkf-btn-secondary { color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.6); }
.bkf-btn-secondary.is-live { background: #da1e70; border-color: #da1e70; }
.bkf-btn:hover { filter: brightness(1.08); }
.bkf-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.bkf-links a {
  padding-bottom: 3px;
  border-bottom: 1px solid #e7c27d;
  color: rgba(255, 255, 255, 0.85);
  font: 500 14px "DM Sans", sans-serif;
  text-decoration: none;
}
.bkf-hero .bkf-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  color: #f3d9a0;
  font: 600 11px "DM Sans", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bkf-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5d8f;
  box-shadow: 0 0 0 4px rgba(255, 93, 143, 0.2);
}
.bkf-card {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid #c9a15a;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 9px rgba(201, 161, 90, 0.12);
}
.bkf-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 1180px) {
  .bkf-hero-inner { padding: 56px 40px; gap: 36px; min-height: 0; }
  .bkf-hero h1 { font-size: 60px; }
  .bkf-hero .bkf-tagline { font-size: 19px; white-space: normal; }
}
@media (max-width: 860px) {
  .bkf-hero {
    background:
      url("/amethyst/bling-kitchen/sparkle-mobile.svg") center top / 390px 844px no-repeat,
      radial-gradient(ellipse at 72% 45%, #5a2788, #2a1340 70%);
  }
  .bkf-hero-inner { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 22px; padding: 20px 20px 40px; }
  .bkf-card { aspect-ratio: auto; height: 400px; border-width: 2px; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(201, 161, 90, 0.12); }
  .bkf-card img { object-position: 22% 50%; }
  .bkf-hero-copy { padding: 0 4px; }
  .bkf-hero h1 { margin: 10px 0 6px; font-size: 44px; }
  .bkf-hero .bkf-tagline { font-size: 15.5px; white-space: nowrap; }
  .bkf-hero .bkf-sub { margin: 8px 0 18px; font-size: 14px; }
  .bkf-btn { padding: 14px 18px; font-size: 14px; }
  .bkf-links { gap: 16px; margin-top: 16px; }
  .bkf-links a { font-size: 13px; }
  .bkf-hero .bkf-live { margin-top: 18px; }
}

/* Desktop: keep the whole framed card visible below the sticky header stack at page load. */
@media (min-width: 861px) {
  .bkf-hero { --bkf-stack: 232px; --bkf-pad: 40px; }
  .bkf-hero-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding-top: var(--bkf-pad);
    padding-bottom: var(--bkf-pad);
  }
  .bkf-card {
    width: min(768px, calc((100svh - var(--bkf-stack) - 2 * var(--bkf-pad)) * 4 / 3), 58vw);
    min-width: 400px;
    justify-self: end;
  }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .bkf-hero { background: radial-gradient(ellipse at 72% 45%, #5a2788, #2a1340 70%); }
  .bkf-card { width: min(768px, calc((100svh - var(--bkf-stack) - 2 * var(--bkf-pad)) * 4 / 3), 50vw); min-width: 360px; }
  .bkf-hero h1 { font-size: clamp(46px, 5.4vw, 60px); }
}

/* Zoom / odd-window hardening (desktop only): headline always fits its column, copy keeps room, short windows still show the whole card. */
@media (min-width: 861px) {
  .bkf-hero-copy { container-type: inline-size; }
  .bkf-hero h1 { font-size: clamp(40px, 16.5cqi, 76px); white-space: nowrap; }
  .bkf-card {
    width: min(768px, calc((100svh - var(--bkf-stack) - 2 * var(--bkf-pad)) * 4 / 3), 58vw, calc(100vw - 600px));
    min-width: 300px;
  }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .bkf-card { width: min(768px, calc((100svh - var(--bkf-stack) - 2 * var(--bkf-pad)) * 4 / 3), 50vw, calc(100vw - 480px)); }
}
@media (min-width: 861px) and (max-height: 640px) {
  .bkf-hero { --bkf-pad: 24px; --bkf-stack: 222px; }
}

/* Purple tile wall behind the hero (Louis, Oct 10 2026): real art-C tile photo, tile only, plum scrim keeps copy AA-readable. */
.bkf-hero,
.bkf-hero[class] {
  background-color: #2a1340;
  background-image:
    linear-gradient(90deg, rgba(36, 15, 56, 0.8) 0%, rgba(36, 15, 56, 0.6) 34%, rgba(36, 15, 56, 0.18) 62%, rgba(36, 15, 56, 0.08) 100%),
    linear-gradient(180deg, rgba(36, 15, 56, 0), rgba(36, 15, 56, 0) 25%, rgba(36, 15, 56, 0) 75%, rgba(36, 15, 56, 0.35)),
    url("/amethyst/bling-kitchen/tile-wall.webp");
  background-size: auto, auto, cover;
  background-position: center, center, right top;
  background-repeat: no-repeat;
}
@media (max-width: 860px) {
  .bkf-hero,
  .bkf-hero[class] {
    background-image:
      linear-gradient(180deg, rgba(36, 15, 56, 0.25) 0%, rgba(36, 15, 56, 0.3) 45%, rgba(36, 15, 56, 0.62) 62%, rgba(36, 15, 56, 0.7) 100%),
      url("/amethyst/bling-kitchen/tile-wall.webp");
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat;
  }
}