/* ==========================================================================
   Pet Saze — classified ads (petban)

   The ads live in a separate Laravel app; only these two bands appear on the
   WordPress front page. The styling deliberately does NOT match the shop:
   a product card is a purchase, an ad card is a plea from a neighbour, and
   they should not look interchangeable.

   Status colour rule, inherited from the design system: red/amber/blue mean
   *state*, orange means *action*. So a status never fills a button, and the
   only orange on a band is the single submit CTA.
   ========================================================================== */

:root {
  /* Status colours, taken from the v2 sheet. They sit deliberately outside
     the orange family so "lost" never competes with "buy" for attention.
     Measured on their own tinted grounds, all three clear AA for body text. */
  --st-lost:   var(--lost);
  --st-found:  var(--found);
  --st-rehome: var(--adopt);

  /* Text steps, for the pill labels. See the note beside --lost-ink. */
  --st-lost-ink:   var(--lost-ink);
  --st-found-ink:  var(--found-ink);
  --st-rehome-ink: var(--adopt-ink);

  --st-lost-bg:   var(--lost-bg);
  --st-found-bg:  var(--found-bg);
  --st-rehome-bg: var(--adopt-bg);
}

/* ------------------------------------------------------------------- band */

/* The two bands are told apart by ground, not by decoration: lost stays on
   white next to the shop above it, rehoming drops onto the neutral ground so
   the eye registers a different kind of ask before it reads a word. */
.band--rehome { background: var(--mist); }

.band__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s6);
}

.band__intro { max-width: 62ch; }

.band__title {
  margin: 0 0 var(--s2);
  font-size: var(--t-3xl);
  line-height: 1.375;
}

.band__blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.857;
  max-width: 620px;
}

.band__cta { flex: none; min-height: 50px; }

/* ------------------------------------------------------------------- card */

.adcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.adcard:hover {
  border-color: var(--ink-muted);
  box-shadow: var(--shadow);
}

.adcard__media {
  position: relative;
  display: block;
  aspect-ratio: 292 / 160;
  background: var(--mist);
  overflow: hidden;
}

.adcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A missing photo is common — someone whose animal just went missing rarely
   has a clean portrait to hand. So the empty state is designed, not an
   accident: a centred paw on the shop ground, same height as a real image,
   so a row of cards never goes ragged. */
.adcard__noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  opacity: .5;
}

.adcard__pill {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s3);
  min-height: 30px;
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.833;
}

.adcard__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.adcard--lost   .adcard__pill { background: var(--st-lost-bg);   color: var(--st-lost-ink); }
.adcard--found  .adcard__pill { background: var(--st-found-bg);  color: var(--st-found-ink); }
.adcard--rehome .adcard__pill { background: var(--st-rehome-bg); color: var(--st-rehome-ink); }

.adcard--lost   .adcard__dot { background: var(--st-lost); }
.adcard--found  .adcard__dot { background: var(--st-found); }
.adcard--rehome .adcard__dot { background: var(--st-rehome); }

.adcard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4);
  flex: 1;
}

.adcard__title {
  margin: 0 0 var(--s1);
  font-size: 1.0625rem;   /* 17 */
  line-height: 1.824;     /* /31 */
  font-weight: 500;
}

.adcard__title a {
  color: var(--ink);
  text-decoration: none;
}

.adcard__title a:hover { text-decoration: underline; }

.adcard__line {
  margin: 0;
  font-size: .75rem;      /* 12 */
  line-height: 1.833;     /* /22 */
  color: var(--ink-muted);
}

.adcard__line--soft { color: var(--ink-muted); }

.adcard__price {
  margin: var(--s2) 0 0;
  font-weight: 500;
  font-size: var(--t-lg);
  color: var(--ink);
}

/* Pushed to the bottom so every card in a row ends on the same line even
   when one of them has no detail text. */
.adcard__cta {
  margin-block-start: auto;
  display: block;
  text-align: center;
  padding: var(--s2) var(--s3);
  min-height: 40px;
  line-height: 1.846;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--t-xs);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

/* The gap above the button is the body's own row gap plus this, kept as
   padding on the body rather than a margin on the button, because the button
   already owns margin-block-start:auto to sit on the card floor. */
.adcard__body { padding-block-end: var(--s4); }

.adcard__cta:hover {
  background: var(--mist);
  border-color: var(--ink-muted);
}

/* ----------------------------------------------------------------- mobile */

/* Scoped to the band. `.grid--4` is a global utility defined in petsaze.css
   with its own responsive ladder (4 → 3 → 2); restyling it from a page sheet
   reached every other four-wide grid on whatever page this sheet happened to
   load on — which is how the magazine's article row went to two columns at a
   width where it should have been three. A page stylesheet may add to the
   page's own components; it may not redefine a shared class. */
@media (max-width: 1024px) {
  .band .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .band__head {
    flex-direction: column;
    align-items: stretch;
  }
  .band__cta { width: 100%; }
  .band__title { font-size: var(--t-2xl); }
  .band .grid--4 { grid-template-columns: 1fr; }
}