/* Everything Pets — /pets/.
 *
 * Coastal editorial, in the magazine's own voice: a full-bleed photographic hero like
 * /weddings/, the theme's serif for every heading (never declared here — the theme owns the
 * family), letterspaced small caps for labels, and a warm status palette instead of alarm red.
 *
 * The directory sets no image wells. These records carry no photographs, and 24 grey
 * rectangles with a paw glyph in them is worse than no picture at all. A card that has an
 * image shows it; a card that doesn't reads as a printed index entry, which is a look, not a
 * failure. PLATFORM.md §13: inherit the theme, tokens over hardcoded hex.
 */

#lc-pets-app,
#lc-pets-beaches-only {
  --lcp-ink: var(--lc-ink, #1d1b1a);
  --lcp-mute: #6e6862;
  --lcp-rule: rgba(29, 27, 26, .13);
  --lcp-cream: #f7f2ee;
  --lcp-accent: var(--lc-accent, #cc9999);
  /* Status colours: deep and desaturated, so a "no dogs" verdict reads as information
     rather than as an emergency. */
  --lcp-good: #3f6b4f;
  --lcp-ok: #8a6a2f;
  --lcp-bad: #96504a;
  --lcp-unknown: #6e6862;
  color: var(--lcp-ink);
}

/* The page title and the theme's top spacing both belong to the theme; on this page the
   photograph is the title and the hero runs to the header. Scoped to the body class hub.php
   adds — never to a page id.
   NB: do NOT put overflow clipping on #lc-pets-app. It creates a clipping context and the
   full-bleed hero (negative inline margins) gets cropped back to the container. */
/* The hub hides the theme title because its hero carries the H1. The guide pages KEEP it —
   "Dog-Friendly Beaches" is better copy than anything I'd render, and one H1 per page beats two. */
body.lc-pets-hero .uk-article-title { display: none; }
body.lc-pets-page:not(.lc-pets-hero) .uk-article-title { margin-bottom: .6rem; }
/* Only the hub opens on a full-bleed photograph; the guide pages keep their top padding. */
body.lc-pets-hero #tm-main { padding-top: 0; }
body.lc-pets-hero #tm-main .uk-margin-medium { margin-top: 0; }

/* ------------------------------------------------------------------ shared furniture */

.lcp-eyebrow {
  margin: 0 0 .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lcp-mute);
}

.lcp-sec { margin: 0 0 5.5rem; }
.lcp-sec-head { max-width: 60ch; margin: 0 0 2.4rem; }
.lcp-sec-h { margin: 0 0 .7rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; }
.lcp-sec-dek { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--lcp-mute); }

.lcp-blurb { margin: 0 0 1rem; font-size: .92rem; line-height: 1.62; }
.lcp-meta { margin: 0 0 .7rem; font-size: .84rem; color: var(--lcp-mute); }

.lcp-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  margin: auto 0 0; padding-top: .9rem; font-size: .85rem;
}
.lcp-tel { color: var(--lcp-mute); text-decoration: none; }
.lcp-tel:hover { color: var(--lcp-ink); }
.lcp-go { font-weight: 600; text-decoration: none; color: var(--lcp-ink); white-space: nowrap; }
.lcp-go:hover { color: var(--lcp-accent); }
.lcp-empty { color: var(--lcp-mute); }

/* ------------------------------------------------------------------ hero */

.lcp-hero {
  position: relative;
  margin: 0 calc(50% - 50vw) 4.5rem;
  width: 100vw;
  min-height: min(76vh, 640px);
  display: flex;
  align-items: flex-end;
  background-color: #2a1d20;
  /* Two scrims, not one: a vertical foot-shadow to seat the type, and a soft left wash so the
     headline holds without flattening the sunrise into mud. */
  background-image:
    linear-gradient(to top, rgba(24,15,18,.80) 0%, rgba(24,15,18,.30) 38%, rgba(24,15,18,.06) 70%),
    linear-gradient(95deg, rgba(24,15,18,.60) 0%, rgba(24,15,18,.16) 52%, rgba(24,15,18,0) 100%),
    url('/wp-content/uploads/pets-hero-isle-of-palms-sunrise-2048x1127.jpg');
  background-size: cover;
  /* Pushed right so the sun clears the headline instead of burning through the descenders. */
  background-position: 68% 42%;
  color: #fff;
}

.lcp-hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 2rem 4.2rem;
}

/* One orchestrated entrance, staggered. Anything more would be fidgeting. */
@media (prefers-reduced-motion: no-preference) {
  .lcp-hero-eyebrow, .lcp-hero-h, .lcp-hero-dek, .lcp-live, .lcp-hero-cta {
    animation: lcp-rise .8s cubic-bezier(.2,.7,.3,1) both;
  }
  .lcp-hero-h { animation-delay: .06s; }
  .lcp-hero-dek { animation-delay: .13s; }
  .lcp-live { animation-delay: .2s; }
  .lcp-hero-cta { animation-delay: .26s; }
}
@keyframes lcp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lcp-hero-eyebrow { color: rgba(255,255,255,.8); }
.lcp-hero-h {
  margin: 0 0 1.1rem;
  font-size: clamp(2.9rem, 8vw, 5.6rem);
  line-height: .97;
  color: #fff;
}
.lcp-hero-dek {
  max-width: 46ch;
  margin: 0 0 1.7rem;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  color: rgba(255,255,255,.9);
}

/* The live verdict, straight off the beach feed. */
.lcp-live {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.9rem; padding: .55rem 1rem .55rem .8rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  backdrop-filter: blur(6px);
  color: #fff; text-decoration: none; font-size: .88rem;
}
.lcp-live:hover { background: rgba(255,255,255,.18); color: #fff; }
.lcp-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.lcp-live.lcp-tone-good .lcp-live-dot { background: #8fd0a4; }
.lcp-live.lcp-tone-ok .lcp-live-dot { background: #e2be74; }
.lcp-live.lcp-tone-bad .lcp-live-dot { background: #e29c95; }
.lcp-live.lcp-tone-unknown .lcp-live-dot { background: #c9c4be; }
.lcp-live-txt strong { font-weight: 600; }

.lcp-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.lcp-btn {
  padding: .82rem 1.6rem;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff; text-decoration: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.lcp-btn:hover { background: #fff; border-color: #fff; color: #1d1b1a; }

.lcp-credit {
  position: absolute; right: 1rem; bottom: .5rem; margin: 0;
  font-size: .64rem; letter-spacing: .04em; color: rgba(255,255,255,.5);
}
.lcp-credit a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------------ beach board */

.lcp-b-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  background: var(--lcp-rule);
  border: 1px solid var(--lcp-rule);
}
.lcp-b { display: flex; flex-direction: column; background: #fff; }
.lcp-b-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5rem; }

.lcp-b-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--lcp-cream); }
.lcp-b-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.lcp-b:hover .lcp-b-img img { transform: scale(1.045); }

.lcp-b-name { margin: 0 0 .9rem; font-size: 1.28rem; line-height: 1.2; }
/* The verdict is the biggest thing on the card, because it is the only thing most people
   came for. Colour carries the tone; there is no coloured tab or bar (an AI-UI tell). */
/* Wrapper owns the gap, so a card with no rule line (the verdict says it all) keeps its
   rhythm instead of collapsing onto the note. */
.lcp-b-verdict { margin: 0 0 1rem; }
.lcp-b-call { margin: 0 0 .15rem; font-size: 1.42rem; line-height: 1.15; font-weight: 500; }
.lcp-b-rule {
  margin: 0; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lcp-mute);
}
.lcp-tone-good .lcp-b-call { color: var(--lcp-good); }
.lcp-tone-ok .lcp-b-call { color: var(--lcp-ok); }
.lcp-tone-bad .lcp-b-call { color: var(--lcp-bad); }
.lcp-tone-unknown .lcp-b-call { color: var(--lcp-unknown); }

.lcp-b-permit {
  margin: 0 0 .85rem; padding: .7rem .85rem;
  background: var(--lcp-cream); border-radius: 2px;
  font-size: .85rem; line-height: 1.55;
}
.lcp-b-note { margin: 0 0 1.1rem; font-size: .9rem; line-height: 1.62; }
.lcp-b-src {
  margin: auto 0 0; padding-top: .5rem;
  font-size: .72rem; line-height: 1.5; color: var(--lcp-mute);
}
.lcp-b-src a { color: inherit; text-decoration: underline; }
.lcp-disclaimer {
  margin: 1.1rem 0 0; font-size: .8rem; font-style: italic; color: var(--lcp-mute);
}

/* ------------------------------------------------------------------ front door
 * A dense visual index with a live rail. The mosaic mixes photo tiles and type tiles on
 * purpose: eight photographs in a grid stop being pictures and become wallpaper, and the
 * categories with no honest photograph (dog parks) get to lead on the fact instead. */

.lcp-home-cols {
  display: grid; gap: 2.6rem;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  margin: 0 0 4.5rem;
}
.lcp-mosaic-head { margin-bottom: 1.8rem; }

.lcp-mosaic {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--lcp-rule);
  border: 1px solid var(--lcp-rule);
}
.lcp-t {
  position: relative; display: flex; flex-direction: column;
  min-height: 15rem; background: #fff; color: inherit; text-decoration: none;
  transition: background-color .25s;
}
.lcp-t.is-wide { grid-column: span 2; }
.lcp-t:hover { background: var(--lcp-cream); color: inherit; }

.lcp-t-img { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--lcp-cream); }
.lcp-t-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.lcp-t:hover .lcp-t-img img { transform: scale(1.05); }

.lcp-t-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.3rem 1.4rem 1.4rem; }
.lcp-t-title {
  display: block; margin: 0 0 .5rem;
  font-family: var(--lc-font-heading, inherit);
  font-size: 1.45rem; line-height: 1.14;
}
.lcp-t.is-wide .lcp-t-title { font-size: 1.75rem; }
.lcp-t:hover .lcp-t-title { color: var(--lcp-accent); }
.lcp-t-dek { display: block; margin: 0 0 1.1rem; font-size: .89rem; line-height: 1.6; color: var(--lcp-mute); }
.lcp-t-count {
  display: block; margin-top: auto;
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}

/* Type tiles: no photograph, so the words have to carry it. */
.lcp-t-type { background: var(--lcp-cream); }
.lcp-t-type:hover { background: #fff; }
.lcp-t-type .lcp-t-body { justify-content: center; padding: 1.8rem 1.4rem; }
.lcp-t-type .lcp-t-title { font-size: 1.6rem; }

/* ------------------------------------------------------------------ live rail */

.lcp-rail { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.lcp-r-card { padding: 1.2rem 1.3rem; border: 1px solid var(--lcp-rule); background: #fff; }
.lcp-r-when { margin: -.25rem 0 .9rem; font-size: .8rem; color: var(--lcp-mute); }
.lcp-r-list { display: flex; flex-direction: column; }

.lcp-r-item {
  display: grid; grid-template-columns: .5rem 1fr auto; gap: .5rem;
  align-items: baseline; padding: .5rem 0;
  color: inherit; text-decoration: none; font-size: .84rem;
  border-top: 1px solid var(--lcp-rule);
}
.lcp-r-item:first-child { border-top: 0; }
.lcp-r-item:hover { color: var(--lcp-accent); }
.lcp-r-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; transform: translateY(-.1em); }
.lcp-r-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcp-r-call { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.lcp-tone-good .lcp-r-dot, .lcp-tone-good .lcp-r-call { color: var(--lcp-good); }
.lcp-tone-ok .lcp-r-dot, .lcp-tone-ok .lcp-r-call { color: var(--lcp-ok); }
.lcp-tone-bad .lcp-r-dot, .lcp-tone-bad .lcp-r-call { color: var(--lcp-bad); }
.lcp-tone-unknown .lcp-r-dot, .lcp-tone-unknown .lcp-r-call { color: var(--lcp-unknown); }

.lcp-r-more {
  display: block; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--lcp-rule);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lcp-ink); text-decoration: none;
}
.lcp-r-more:hover { color: var(--lcp-accent); }
.lcp-r-quiet { background: var(--lcp-cream); border-color: transparent; }
.lcp-r-note { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--lcp-mute); }

@media (max-width: 1100px) {
  .lcp-home-cols { grid-template-columns: minmax(0, 1fr); }
  .lcp-rail { position: static; }
  .lcp-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcp-t.is-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .lcp-mosaic { grid-template-columns: minmax(0, 1fr); }
  .lcp-t, .lcp-t.is-wide { grid-column: span 1; min-height: 0; }
  .lcp-t-title, .lcp-t.is-wide .lcp-t-title { font-size: 1.35rem; }
}

/* ------------------------------------------------------------------ landing page
 * /pets/ is a hub. Its job is to send you to the right guide in one click, so the guide cards
 * are large, photographic and unmistakably clickable, and the beach answer sits above them as
 * a strip rather than a full board. */

.lcp-page-h { font-size: clamp(2rem, 4.6vw, 3.2rem); }

.lcp-g-grid {
  display: grid; gap: 2.4rem 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.lcp-g {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
.lcp-g-img { display: block; margin: 0 0 1.1rem; aspect-ratio: 3/2; overflow: hidden; background: var(--lcp-cream); }
.lcp-g-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.lcp-g:hover .lcp-g-img img { transform: scale(1.045); }
.lcp-g-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.lcp-g-title {
  display: block; margin: 0 0 .5rem;
  font-family: var(--lc-font-heading, inherit);
  font-size: 1.6rem; line-height: 1.15;
}
.lcp-g:hover .lcp-g-title { color: var(--lcp-accent); }
.lcp-g-dek { display: block; margin: 0 0 1rem; font-size: .93rem; line-height: 1.6; color: var(--lcp-mute); }
.lcp-g-count {
  display: block; margin-top: auto;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* The right-now strip: nine answers, one line each, straight to the beach page. */
.lcp-strip {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  background: var(--lcp-rule); border: 1px solid var(--lcp-rule);
}
.lcp-strip-item {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem; background: #fff; text-decoration: none; color: inherit;
  transition: background-color .2s;
}
.lcp-strip-item:hover { background: var(--lcp-cream); color: inherit; }
.lcp-strip-name { font-size: .92rem; }
.lcp-strip-call { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lcp-tone-good .lcp-strip-call { color: var(--lcp-good); }
.lcp-tone-ok .lcp-strip-call { color: var(--lcp-ok); }
.lcp-tone-bad .lcp-strip-call { color: var(--lcp-bad); }
.lcp-tone-unknown .lcp-strip-call { color: var(--lcp-unknown); }

.lcp-more { margin: 1.8rem 0 0; }
.lcp-btn-dark {
  display: inline-block; border-color: var(--lcp-ink); color: var(--lcp-ink);
}
.lcp-btn-dark:hover { background: var(--lcp-ink); border-color: var(--lcp-ink); color: #fff; }

/* Guide pages cross-link so nothing is a dead end. */
.lcp-guidenav { margin: 3.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--lcp-rule); }
.lcp-guidenav-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.lcp-guidepage { padding-top: 1rem; }

/* ------------------------------------------------------------------ beach timetable
 * The hours ARE the product. A beach where the rule changes three times a day has to look
 * like that at a glance, so every band gets its own line with real clock times and the rule
 * coloured by what it actually permits. No "at all other hours". */

.lcp-b-next {
  margin: .5rem 0 0; padding: .45rem .7rem;
  background: var(--lcp-cream); border-radius: 2px;
  font-size: .82rem; color: var(--lcp-ink);
}
.lcp-b-next strong { font-weight: 700; }

.lcp-sch { margin: 0 0 1.1rem; padding: .95rem 1rem 1rem; border: 1px solid var(--lcp-rule); }
.lcp-sch-h {
  margin: 0 0 .7rem; font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lcp-mute);
}
.lcp-sch-season + .lcp-sch-season {
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--lcp-rule);
}
.lcp-sch-when {
  margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.lcp-sch-bands { margin: 0; }
.lcp-sch-band {
  display: grid; grid-template-columns: 7.4rem 1fr; gap: .2rem .8rem;
  padding: .22rem 0;
}
.lcp-sch-time {
  margin: 0; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--lcp-mute);
}
.lcp-sch-rule { margin: 0; font-size: .8rem; font-weight: 600; line-height: 1.45; }
/* The rule takes the colour of what it permits, so the shape of the day is readable
   before a word of it is. */
.lcp-status-offleash .lcp-sch-rule,
.lcp-status-voice .lcp-sch-rule { color: var(--lcp-good); }
.lcp-status-leashed .lcp-sch-rule { color: var(--lcp-ok); }
.lcp-status-prohibited .lcp-sch-rule,
.lcp-status-banned .lcp-sch-rule { color: var(--lcp-bad); }

@media (max-width: 420px) {
  .lcp-sch-band { grid-template-columns: 1fr; }
  .lcp-sch-time { font-size: .76rem; }
}

/* ------------------------------------------------------------------ pet-friendly guide
 * Photo-led, and gapped rather than hairline-joined so it reads differently from the beach
 * board directly above it. Every card here has a real picture because every card is an
 * existing restaurant, hotel or attraction. */

.lcp-f-grid {
  display: grid; gap: 2.8rem 2.2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.lcp-f { display: flex; flex-direction: column; }
.lcp-f-img { display: block; margin: 0 0 1.1rem; aspect-ratio: 3/2; overflow: hidden; background: var(--lcp-cream); }
.lcp-f-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.lcp-f:hover .lcp-f-img img { transform: scale(1.045); }
.lcp-f-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.lcp-f-name { margin: 0 0 .45rem; font-size: 1.24rem; line-height: 1.22; }
.lcp-f-name a { color: inherit; text-decoration: none; }
.lcp-f-name a:hover { color: var(--lcp-accent); }

.lcp-f-verdict {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.lcp-tone-good .lcp-f-verdict { color: var(--lcp-good); }
.lcp-tone-ok   .lcp-f-verdict { color: var(--lcp-ok); }
.lcp-tone-bad  .lcp-f-verdict { color: var(--lcp-bad); }
/* The fee rides alongside the verdict — it is the number that decides the trip. */
.lcp-f-fee {
  margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--lcp-rule);
  font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--lcp-mute);
}

/* ------------------------------------------------------------------ directory */

.lcp-filters { margin: 0 0 1.2rem; }
.lcp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.lcp-chip {
  padding: .42rem .95rem; border: 1px solid var(--lcp-rule); border-radius: 100px;
  background: transparent; color: var(--lcp-ink);
  font: inherit; font-size: .8rem; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.lcp-chip:hover { border-color: var(--lcp-ink); }
.lcp-chip.on { background: var(--lcp-ink); border-color: var(--lcp-ink); color: #fff; }

.lcp-selrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.lcp-sel, .lcp-q {
  padding: .5rem .7rem; border: 1px solid var(--lcp-rule); border-radius: 2px;
  background: #fff; font: inherit; font-size: .86rem; color: var(--lcp-ink);
}
.lcp-q { flex: 1 1 220px; min-width: 160px; }
.lcp-open-t { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; }
.lcp-count {
  margin: 0 0 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--lcp-rule);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lcp-mute);
}

.lcp-grid {
  display: grid; gap: 2.6rem 2.2rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
/* A hairline over each entry: without photographs the grid needs some structure, and a rule
   is what a printed back-of-book index would use. */
.lcp-card { display: flex; flex-direction: column; padding-top: 1rem; border-top: 1px solid var(--lcp-rule); }
.lcp-card.is-featured {
  padding: 1rem 1.2rem .2rem; border-top: 2px solid var(--lcp-accent); background: var(--lcp-cream);
}

.lcp-img { display: block; margin: 0 0 1rem; aspect-ratio: 16/10; overflow: hidden; }
.lcp-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.lcp-card:hover .lcp-img img { transform: scale(1.04); }

.lcp-c-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.lcp-c-top .lcp-eyebrow { margin-bottom: .45rem; }
.lcp-tag {
  margin-left: .5rem; padding: .1rem .4rem;
  background: var(--lcp-accent); color: #fff; border-radius: 2px; letter-spacing: .1em;
}
.lcp-heart {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: -.2rem;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: #b8b2ac;
  transition: color .2s, transform .2s;
}
.lcp-heart:hover { color: var(--lcp-accent); transform: scale(1.12); }
.lcp-heart.is-on { color: var(--lcp-accent); }

.lcp-c-name { margin: 0 0 .4rem; font-size: 1.12rem; line-height: 1.28; }
.lcp-c-name a { color: inherit; text-decoration: none; }
.lcp-c-name a:hover { color: var(--lcp-accent); }
.lcp-open {
  margin-left: .5rem; padding-left: .55rem; border-left: 1px solid var(--lcp-rule);
  color: var(--lcp-good); font-weight: 600;
}

/* ------------------------------------------------------------------ adopt */

.lcp-adopt {
  margin: 0 calc(50% - 50vw); padding: 4.5rem calc(50vw - 50%) 4rem;
  background: var(--lcp-cream);
}
.lcp-adopt-grid {
  display: grid; gap: 2.4rem 2.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lcp-a { display: flex; flex-direction: column; padding-top: 1.1rem; border-top: 2px solid var(--lcp-ink); }
.lcp-a-name { margin: 0 0 .3rem; font-size: 1.2rem; line-height: 1.25; }
.lcp-a-name a { color: inherit; text-decoration: none; }
.lcp-a-name a:hover { color: var(--lcp-accent); }
.lcp-a .lcp-eyebrow { margin-bottom: .8rem; }

/* ------------------------------------------------------------------ small screens */

@media (max-width: 960px) {
  .lcp-hero-inner { padding: 6rem 1.5rem 3.2rem; }
}

@media (max-width: 640px) {
  .lcp-hero { min-height: 0; }
  .lcp-hero-inner { padding: 5rem 1.2rem 2.6rem; }
  .lcp-hero-dek { font-size: .98rem; }
  .lcp-btn { flex: 1 1 100%; text-align: center; }
  .lcp-sec { margin-bottom: 3.6rem; }
  .lcp-b-body { padding: 1.25rem 1.2rem; }
  .lcp-grid { gap: 2.2rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .lcp-adopt { padding-top: 3.2rem; padding-bottom: 3rem; }
}