/* =========================================================
   Home page only: hero, "Most searched" chips and section spacing.
   Loaded via `pageCss: home` in src/index.njk.
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  padding-top: 88px; /* room for the fixed nav */
  background: var(--b1-deep-teal);
  color: var(--b15-white);
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(48px, 6vw, 88px);
}
/* Deck cover composition: teal panel left, photograph bleeding off the right edge.
   The photo starts behind the copy column and dissolves into the teal, so there is no hard seam. */
.hero__photo {
  --photo-pos: 62% 28%;
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: 38%;
  overflow: hidden; /* keeps the photo's entrance scale inside the frame (no seam at the edge) */
}
/* Blur-up: a 24px preview (under 1KB, inlined) shows instantly; the real photo fades in over it */
.hero__photo::before {
  content: "";
  position: absolute; inset: -40px;
  background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAYABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDF0e5mF9Ygvjyg2wkcDJJNdBb200BuJjLC8ksTsqB/mb14xXOaXbvLe20K7vusXK9hn9K3pGuYrFfs8HnSsdgdW2lfZu4xXHKKbOmDsjO1+RWyMYbC8fhRVPUYLqOBBcyK7YGe5J+tFOmkloyZSuzV0v8A4lygmTLSgE4/l9KtE2k1wbgOyvjJUOQDj2oorS1kIxbyVrgF3wGJ5VaKKKwjsJ6n/9k=") var(--photo-pos) / cover no-repeat;
  filter: blur(24px);
}
.hero__photo img {
  position: relative; /* paints above the preview */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos);
}
.js .hero__photo img { transform: scale(1.04); transition: opacity 1s var(--ease-out), transform 1.8s var(--ease-out); }
.js .hero__photo img.is-loaded { transform: none; }
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--b1-deep-teal) 0%, rgb(4 52 60 / .92) 14%, rgb(4 52 60 / .55) 30%, rgb(4 52 60 / 0) 52%),
    linear-gradient(180deg, rgb(4 52 60 / .55) 0%, rgb(4 52 60 / 0) 22%),
    linear-gradient(0deg, rgb(4 52 60 / .35) 0%, rgb(4 52 60 / 0) 25%);
  pointer-events: none;
}

/* No z-index here on purpose: a stacking context would trap the docking search beneath the nav */
.hero__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(460px, 44vw, 600px);
  padding-block: clamp(24px, 4vw, 48px) 0;
}
.hero__copy { padding-right: clamp(24px, 4vw, 56px); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-top: 18px;
}
.hero__title span { color: var(--b5-cyan-light); }

.hero .search-slot { margin-top: 36px; max-width: 560px; }

.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.popular__label { font-size: 14px; color: rgb(226 251 255 / .6); margin-right: 4px; }

/* ---------- Sections ---------- */
.home-section--browse { padding-block: clamp(64px, 9vw, 112px) clamp(56px, 7vw, 88px); }
.home-section--features { padding-bottom: clamp(64px, 8vw, 104px); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero { padding-bottom: 0; display: flex; flex-direction: column; }
  .hero__photo { order: 3; }
  .hero__body { grid-template-columns: 1fr; min-height: 0; padding-bottom: 40px; }
  .hero__copy { padding-right: 0; }
  .hero__photo { --photo-pos: 60% 40%; position: relative; left: auto; aspect-ratio: 4 / 3; margin-top: -40px; }
  .hero__photo::after { background: linear-gradient(180deg, var(--b1-deep-teal) 0%, rgb(4 52 60 / .6) 18%, rgb(4 52 60 / 0) 45%); }
}
@media (max-width: 600px) {
  .hero__photo { aspect-ratio: 1 / 1; }
}
/* Large and 4K displays: the hero and type grow a step */
@media (min-width: 1800px) {
  .hero__body { min-height: 680px; }
  .hero__title { font-size: 76px; }
  /* very wide frames crop the square photo hard; narrow the frame and recentre so head and tracker both stay in view */
  .hero__photo { --photo-pos: 64% 50%; left: 46%; }
  .hero .search-slot { max-width: 620px; }
}
@media (min-width: 2400px) {
  .hero__body { min-height: 760px; }
  .hero__title { font-size: 84px; }
  /* past this width the frame stops growing, so the dog keeps the same crop as at 2560px */
  .hero__photo { left: auto; width: 1480px; }
}