/* public/css/hero.css
   Editorial hero + Kindle-style device (clickable). */

.bl-hero {
  padding: 40px 0 10px;
  background: radial-gradient(1000px 300px at 50% 0%, var(--surface-2, rgba(0,0,0,.03)), transparent 60%);
}

.bl-hero__inner {
  display: grid;
  grid-template-columns: 1fr min(34vw, 340px);
  align-items: center;
  gap: 28px;
}

/* Left copy */
.bl-hero__copy .eyebrow {
  letter-spacing: .12em;
  font-size: .8rem;
  opacity: .6;
  margin: 0 0 6px;
}

.bl-hero__title {
  margin: 0 0 14px;
  line-height: 1.15;
  font-size: clamp(1.8rem, 3.2vw + .6rem, 3.2rem);
}

/* The highlight pill sets BOTH its background and its foreground. Setting only
   the background left the text inheriting --ink, which flips with the theme
   while the hardcoded pill did not — the light-on-light hero bug. Tying the two
   together in one rule makes that failure structurally impossible. */
.bl-hero__title .hl {
  background: var(--hl-bg);
  color: var(--hl-ink);
  border-radius: 10px;
  padding: 0 .35em;
  box-shadow: 0 2px 0 var(--border, rgba(0,0,0,.08)) inset;
}

.bl-hero__search {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
}
.bl-hero__search input {
  flex: 1;
  min-width: 200px;
}

.bl-hero__points {
  margin: 8px 0 0;
  padding-left: 18px;
  opacity: .85;
}

/* --------- Kindle-style device ---------- */
.bl-device {
  display: block;
  width: min(34vw, 340px);
  /* Ensure it always has space even if the inner aspect-ratio fails */
  min-width: 240px;
  margin-inline: auto;
  transform: rotate(-4deg);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
  text-decoration: none;
}

.bl-device__frame {
  width: 100%;
  aspect-ratio: 3 / 5;
  border-radius: 20px;
  background: #111;
  padding: 14px;
  position: relative;
}

.bl-device__screen {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #f5f1e8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

/* Paper lines */
.bl-device__paper {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.06) 0,
      rgba(0,0,0,.06) 1px,
      transparent 1px,
      transparent 22px
    );
}

/* Center the message and make it a bit more legible */
.bl-device__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  font-size: .95rem;
  line-height: 1.35;
  color: rgba(0,0,0,.6);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.bl-device__pen {
  position: absolute;
  width: 64px;
  height: 8px;
  right: 14px;
  bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ddd, #f7f7f7);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Hover cue -> register */
.bl-device:hover { transform: rotate(-3deg) translateY(-2px); }

/* --------- Responsive ---------- */
/* Tablet: the device stacks under the copy, but SMALL. It used to be
   width:min(70vw,360px) with a 3/5 aspect ratio, which measured 391×618px on an
   iPad — 52% of the viewport height of pure decoration, shoving the shelves off
   the screen. */
@media (max-width: 980px) {
  .bl-hero__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .bl-device {
    margin: 4px auto 0;
    width: min(34vw, 190px);
    min-width: 0;                /* the old 240px floor defeated any shrinking */
    transform: rotate(-3deg);
  }
  .bl-device__text { font-size: .8rem; padding: 12px; }
}

/* Phone: the mockup is gone.
   THE PRODUCT ARGUMENT: the books ARE the product. At 390px this decoration
   measured 296×469px — 50% of the viewport height — and pushed the first book
   cover to 0.98 screens down, so a phone visitor saw a landing page with no
   books at all. On a small screen ornament is the first thing to cut. The hero
   copy and the search box stay; the device does not.
   It is display:none rather than visibility:hidden so it costs no layout space,
   and the <a href="/auth"> it wrapped is not the only route to sign-up (the
   drawer carries "Enter Library"), so no destination is lost. */
@media (max-width: 768px) {
  .bl-device { display: none; }

  .bl-hero { padding: 20px 0 6px; }
  .bl-hero__inner { gap: 12px; }
  .bl-hero__title { font-size: clamp(1.55rem, 6.2vw, 2.1rem); margin-bottom: 10px; }
  .bl-hero__search { margin: 8px 0 10px; }
  .bl-hero__search input {
    min-width: 0;                /* 200px floor + button overflowed 390px */
    font-size: 16px;             /* no iOS zoom-on-focus */
    min-height: 44px;
  }
  .bl-hero__search .btn { min-height: 44px; }
  /* Three bullet points of marketing copy are not worth a third of a phone
     screen when books are waiting below. */
  .bl-hero__points { display: none; }
}

/* Landscape phone (short viewport, ANY width).
   A 844x390 landscape phone is WIDER than the 768px breakpoint, so it was
   getting the full desktop hero — device mockup included — on a 390px-TALL
   screen, pushing the first book cover to 2.08 viewport heights. The phone
   collapse above is keyed on width and misses it. This is keyed on HEIGHT, so
   any short viewport (landscape phones, split-screen) drops the ornament and
   tightens the hero, bringing books up near the fold regardless of width. */
@media (max-height: 500px) {
  .bl-device { display: none; }
  .bl-hero { padding: 12px 0 4px; }
  .bl-hero__inner { grid-template-columns: 1fr; gap: 8px; }
  .bl-hero__title { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 8px; }
  .bl-hero__points { display: none; }
  .bl-hero__search input { min-height: 44px; font-size: 16px; }
  .bl-hero__search .btn { min-height: 44px; }
}