/* The home, laid out on the mockup. Every colour here is a token declared in
   build.py: nothing in this file invents a hue of its own. */

:root { --gutter: 24px; }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* The wrapper stops constraining so the hero can run edge to edge, and each
   child takes its own measure instead. No viewport units: on a desktop with a
   visible scrollbar 100vw is wider than the page and everything drifts. */
.fooppy-home main.wrap { max-width: none; padding: 0; }
.fooppy-home main.wrap > * {
  width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto;
}
.fooppy-home main.wrap > .hero { width: 100%; }

/* ------------------------------------------------------------------ hero */
/* The photograph is the band. It is drawn with the animals on the right and
   the left left empty, so the heading, the field and the pills lie over that
   empty half. It used to be a lilac block beside a picture, which met it on a
   hard vertical seam down the middle of the page. */
.hero {
  position: relative; isolation: isolate; margin-bottom: 34px;
  background: linear-gradient(105deg, #F7E7FA 0%, #F4E0F8 46%, #EFD9F6 100%);
  display: grid; align-items: center; min-height: 356px; overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
}
.hero-words {
  position: relative; width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto; padding: 34px 0 36px; max-width: none;
}
/* Everything the words occupy is held to the left half, where the photograph
   has nothing in it. */
.hero-words > * { max-width: 540px; }
/* The paw behind the heading: the brand's own, large, faint, and out of the
   way of every word. */
.hero-words .paw {
  position: absolute; left: 400px; top: 16px; width: 124px; height: 124px;
  z-index: -1; pointer-events: none; opacity: .26; max-width: none;
}
.fooppy-home h1 {
  font: 900 clamp(30px, 3.6vw, 46px)/1.08 var(--display); color: var(--deep);
  letter-spacing: -.025em; margin: 0 0 14px;
}
.hero-lede {
  margin: 0 0 20px; font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.42;
  color: #4a2a46; font-weight: 600;
}
/* A white pill with the field in it and the button inside the pill: one
   control to the eye, two to the keyboard. */
.findbox {
  position: relative; display: flex; align-items: center; background: #fff;
  border-radius: 999px; box-shadow: 0 5px 16px #6a025018; max-width: 430px;
  border: 1px solid #efdcee;
}
.findbox .glass {
  position: absolute; left: 18px; width: 20px; height: 20px; pointer-events: none;
}
.findbox input {
  flex: 1; min-width: 0; height: 54px; border: 0; background: transparent;
  border-radius: 999px; padding: 0 8px 0 48px; font: 500 15.5px var(--text);
  color: var(--ink);
}
.findbox input::placeholder { color: #9d8c9b; }
.findbox input:focus { outline: 0; }
.findbox:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px #7d045825; }
.findbox button {
  flex: none; height: 44px; margin: 5px; padding: 0 26px; border: 0;
  border-radius: 999px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #8E0A66, #6A0250);
  font: 700 16px var(--display);
}
.findbox button:hover { filter: brightness(1.12); }
.hero-pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.hero-pills a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  border: 1.8px solid var(--violet); border-radius: 999px; padding: 11px 24px;
  color: var(--deep); font: 800 16px var(--display); background: #ffffffb8;
}
.hero-pills a:hover { background: #fff; }
.hero-pills img { width: 24px; height: 24px; }
@media (max-width: 880px) {
  /* Too narrow to hold both: the picture goes above the words, which take the
     lilac back, so nothing is read over a dog. */
  .hero { min-height: 0; display: block; }
  .hero-photo { position: static; height: 190px; z-index: 0; object-position: 100% 45%; }
  .hero-words { padding: 24px var(--gutter) 26px; width: 100%; }
  .hero-words > * { max-width: none; }
  .hero-words .paw { left: auto; right: var(--gutter); width: 90px; height: 90px; }
  .findbox { max-width: none; }
}
@media (max-width: 420px) {
  .findbox input { height: 48px; padding-left: 44px; font-size: 15px; }
  .findbox button { padding: 0 18px; font-size: 15px; }
}

/* ------------------------------------------------------- category tiles */
.home-cats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 42px;
}
.home-cat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "art art" "name name" "sub go";
  align-items: center; gap: 3px 8px; text-decoration: none; padding: 14px 14px 15px;
  border-radius: 18px; background: linear-gradient(180deg, #FDF6FC, #F6E7F7);
  border: 1px solid #f1dff1; color: var(--deep); transition: transform .15s, box-shadow .15s;
}
.home-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #6a025018; }
.home-cat-art {
  grid-area: art; display: grid; place-items: center; margin-bottom: 8px;
}
/* The frame is a fixed height and the picture fits inside it: a percentage
   max-height on a centred grid item does not constrain in every browser, and
   the photograph then spilled over the name. */
/* No rounded corner: the pictures are cut out now, so there is no rectangle
   left to soften. */
.home-cat-art img { width: 100%; height: 92px; object-fit: contain; }
.home-cat-art .tile-icon { width: 50px; height: 50px; border-radius: 0; }
.home-cat-name {
  grid-area: name; display: flex; align-items: center; gap: 7px;
  font: 800 16.5px var(--display); color: var(--deep); letter-spacing: -.01em;
}
.home-cat-name .pawbullet { width: 17px; height: 17px; flex: none; }
.home-cat-sub { grid-area: sub; font-size: 12.5px; line-height: 1.3; color: #6c5168;
  font-weight: 500; }
.home-go { grid-area: go; width: 15px; height: 15px; justify-self: end; flex: none; }
@media (max-width: 1040px) { .home-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .home-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .home-cat-art img { height: 72px; }
}

/* -------------------------------------------------------- section heads */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 4px;
}
.fooppy-home .section-head h2 {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 900 clamp(23px, 2.6vw, 31px)/1.1 var(--display); color: var(--deep);
  letter-spacing: -.02em;
}
.head-icon { width: 30px; height: 30px; flex: none; }
.section-more {
  text-decoration: none; font: 800 15.5px var(--display); color: var(--violet);
  border-bottom: 2px solid var(--violet); padding-bottom: 2px;
}
.section-more:hover { color: var(--deep); border-color: var(--deep); }
.home-offers { margin-bottom: 40px; }
.home-offers .grid { margin: 18px 0 10px; }
.example-note { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------- purple promises */
.promises {
  background: linear-gradient(100deg, #710157, #5E014F); color: #fff;
  border-radius: 24px; padding: 28px 30px; margin-bottom: 42px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
}
.promise { display: flex; align-items: flex-start; gap: 18px; }
.promise + .promise { border-left: 1px solid #ffffff38; padding-left: 26px; }
.promise-icon { width: 46px; height: 46px; flex: none; margin-top: 3px;
  filter: brightness(0) invert(1); }
.promises h3 { margin: 0 0 7px; font: 800 20px/1.16 var(--display); color: #fff;
  letter-spacing: -.015em; }
.promises p { margin: 0; font-size: 14.5px; line-height: 1.42; color: #ffffffd9; }
.promises a {
  display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 800;
  font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.promises a:hover { color: #fff; }
@media (max-width: 900px) {
  .promises { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .promise + .promise { border-left: 0; padding-left: 0;
    border-top: 1px solid #ffffff38; padding-top: 20px; }
}

/* ------------------------------------------------------------- two cards */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  margin-bottom: 42px; }
.duo-card {
  background: linear-gradient(180deg, #FBF1FA, #F4E4F6); border: 1px solid #f0ddf0;
  border-radius: 24px; overflow: hidden; display: flex; align-items: center; gap: 4px;
}
.duo-words { padding: 24px 26px 26px; min-width: 0; }
.duo-card h2 { margin: 0 0 10px; font: 900 clamp(21px, 2.3vw, 28px)/1.12 var(--display);
  color: var(--deep); letter-spacing: -.02em; }
.duo-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.42; color: #5b3a57; }
.duo-photo { align-self: stretch; width: 46%; max-width: none; object-fit: cover;
  object-position: 18% 50%; flex: none; }
.purple-button {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: linear-gradient(180deg, #8E0A66, #6A0250); color: #fff;
  border-radius: 999px; padding: 13px 26px; font: 800 15.5px var(--display);
}
.purple-button:hover { filter: brightness(1.12); color: #fff; }
.findcard { align-items: flex-start; }
.findcard .paw-badge {
  flex: none; width: 60px; height: 60px; margin: 26px 0 0 24px; border-radius: 999px;
  background: var(--deep); color: #fff; display: grid; place-items: center;
}
.findcard .paw-badge .paw { width: 34px; height: 34px; }
.findcard .findbox { max-width: none; margin-top: 4px; }
.findcard h3 {
  display: flex; align-items: center; gap: 9px; margin: 18px 0 10px;
  font: 800 17px var(--display); color: var(--deep);
}
.findcard h3 .head-icon { width: 22px; height: 22px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill-row a {
  text-decoration: none; background: #fff; border: 1px solid #efdcee;
  border-radius: 999px; padding: 9px 17px; font-size: 14.5px; font-weight: 600;
  color: var(--ink);
}
.pill-row a:hover { border-color: var(--violet); color: var(--violet); }
@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; }
  .duo-photo { width: 40%; }
}
@media (max-width: 520px) {
  .duo-card { flex-direction: column; align-items: stretch; }
  .duo-photo { width: 100%; max-width: none; height: 160px; }
  .findcard .paw-badge { margin: 22px 0 0 22px; }
}

/* ----------------------------------------------------- explore by need */
.needs { margin-bottom: 42px; }
.need-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  margin-top: 16px;
}
.need-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "icon icon" "name name" "sub go";
  align-items: center; gap: 3px 8px; text-decoration: none; padding: 18px 14px 15px;
  border-radius: 18px; background: linear-gradient(180deg, #FDF6FC, #F6E7F7);
  border: 1px solid #f1dff1; transition: transform .15s, box-shadow .15s;
}
.need-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #6a025018; }
.need-icon { grid-area: icon; width: 40px; height: 40px; margin: 0 auto 12px; }
.need-name { grid-area: name; font: 800 15.5px var(--display); color: var(--deep);
  letter-spacing: -.01em; }
.need-sub { grid-area: sub; font-size: 12.5px; line-height: 1.3; color: #6c5168;
  font-weight: 500; }
@media (max-width: 1040px) { .need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } }

/* ----------------------------------------------------------- the adverts */
.home-sponsor { display: grid; gap: 14px; justify-items: center; margin-bottom: 30px; }
.home-sponsor img { max-width: 100%; height: auto; }
.home-sponsor small {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}