/* =============================================================================
   lc-wedding-landing.css — the 34 "Best {trade} in {town}" pages.

   Deliberately structural. There is not one colour, font or border value in this
   file: the cards are uk-card uk-card-default, the plates are uk-background-muted,
   the type is the theme's heading and meta styles. Restyling the site from the
   YOOtheme global style repaints these pages along with everything else, which is
   the whole reason the layout is native builder elements rather than markup.

   The hero itself needs no rules here — it is the site's standard formula (image
   on the section, header_transparent + overlap + height_offset_top) and its scrim
   comes from lc-motion.css's shared .lc-hero-scrim.
   ========================================================================== */

/* -- The list heading ------------------------------------------------------
   The hero sits directly above, so the first thing under it needs air rather
   than the default paragraph rhythm. More space above than below, per the
   usual heading discipline. */
.lc-wl-heading {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* The hero's primary button lands here. Sticky header + a bare #hash would drop
   the heading behind the navbar. */
#vendors {
  scroll-margin-top: 110px;
}

/* -- Card media ------------------------------------------------------------
   One ratio for every card, whatever the source file is. This is the fix for
   the ragged grid: previously each image kept its own aspect, so a 4:3 photo,
   a square logo and a 7:1 banner started their card bodies at three different
   heights inside the same row. */
.lc-wl-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lc-wl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A logo or a marketing banner is not a photograph and cropping it to fill is
   how you get a wordmark sliced in half. Show the whole thing, small, on the
   theme's muted ground — it then reads as a mark on a plate rather than a
   photo that failed. */
.lc-wl-media--mark img {
  object-fit: contain;
  padding: 12% 16%;
  box-sizing: border-box;
}

/* Nothing usable at all. A typographic plate is honest and keeps the row
   aligned; an empty bordered box is the defect this replaces. */
.lc-wl-media--plate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lc-wl-plate-text {
  padding: 0 1.5rem;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* -- Card body -------------------------------------------------------------
   uk-grid-match equalises the card heights; this lets the body own the leftover
   space so the excerpt has somewhere to go instead of stretching the title. */
.lc-wl-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lc-wl-card-body {
  flex: 1 1 auto;
}

.lc-wl-card-body > p:last-child {
  margin-bottom: 0;
}

/* Two-up on the narrowest phones would give ~150px cards; one column reads. */
@media (max-width: 639px) {
  .lc-wl-media {
    aspect-ratio: 16 / 9;
  }
}