/* ===========================================================================
   URSY.AD estate advert units — v3 skin
   Replaces the 67 rules in current-ad.css. Lift this file wholesale into
   theme/ursy-io/assets/css/site.css.

   MARKUP CHANGES: none. Same elements, same child order, same class names
   (.estate-ad, -label, -chip, -advertiser, -link, -imgwrap, -copy, -headline,
   -body, -ctarow, -price, -cta, -provenance, -anchor, -anchor-link, -powered).
   No new wrappers, no renames.

   ONE RENDERER CHANGE became THREE (all one-liners):
   1. Feed the 300x250 MPU the square image_small crop instead of the
      landscape image crop — the creative now sits in a 112px left column and
      the -sq crop fills it; the 2.3:1 -mpu crop renders too small there.
   2. The advertiser name becomes a link: swap the -advertiser <span> for
      <a class="estate-ad-advertiser" href="https://teas.co.uk/"
         rel="sponsored nofollow noopener">teas.co.uk</a>.
   3. Nothing else — the whole-card click and the Powered-by chip are pure
      CSS on the existing markup.

   HOW THE OVERRUN IS FIXED
   Each unit is now one CSS grid on .estate-ad with explicit rows:
   label / link / provenance. The <a> is itself a grid, so the image, copy and
   price+CTA row sit in declared tracks. The copy track is minmax(0,1fr) with
   overflow:hidden, so long titles truncate inside their own track and can
   never push into the price/CTA row — which is pinned by the grid, not by the
   copy above it. Boxes are height (not min-height) at the exact IAB size, so
   content can never grow the reserved box. CLS stays 0.

   ALSO CHANGED
   - Label and provenance are in flow everywhere (no position:absolute), so
     nothing overlaps on 728x90.
   - Provenance now shows on 320x100 too (rule 5); "No tracking" is dropped
     there for space, "Powered by URSY.AD" stays.
   - Advertiser name now shows on 160x600 (was display:none — rule 1 needs it).
   - Pack shots use object-fit:contain on an ivory plate, at 1:1 scale. The old
     cover + scale(1.22) cropped into the product; that was the main ugliness.
   - The 3px accent bar along the top edge is the URSY.AD frame signature —
     one shared device that marks any unit as a paid slot in both themes.
   - The anchored unit gets an accent arrow via ::after (CSS content, no new
     markup). Swap it for a real element if you'd rather it be in the DOM.

   PER-SPONSOR ACCENT (sponsor-agnostic, CSP-safe: no inline styles)
   The skin takes its accent from --estate-ad-accent. Default is the URSY.AD
   amber. For a future advertiser, add one class and put it on the unit:
       .estate-ad-sponsor-acme { --estate-ad-accent: #2f6fd0; }
   Nothing else needs to change.
   =========================================================================== */

:root {
  --estate-ad-accent: #f2c65c;
}

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

.estate-ad {
  --ad-accent: var(--estate-ad-accent, #f2c65c);
  --ad-accent-ink: #1a1405;
  --ad-ink: #14161d;
  --ad-line: rgba(255, 255, 255, .11);
  --ad-title: #f6f7f9;
  --ad-body: #a4a7b2;
  --ad-meta: #767b8a;
  --ad-plate: #f7f6f2;
  position: relative;
  box-sizing: border-box;
  display: grid;
  margin: 18px auto;
  overflow: hidden;
  border: 1px solid var(--ad-line);
  border-radius: 12px;
  background: var(--ad-ink);
  color: var(--ad-title);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 2px rgba(10, 11, 15, .34), 0 10px 26px rgba(10, 11, 15, .2);
}

/* the URSY.AD frame signature */
.estate-ad::before,
.estate-ad-anchor::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--ad-accent);
  pointer-events: none;
}

.estate-ad *,
.estate-ad-anchor * {
  box-sizing: border-box;
}

/* --- advert label (rule 1: ADVERT + advertiser, always legible) ----------- */

.estate-ad-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ad-meta);
}

.estate-ad-chip {
  flex: none;
  padding: 2px 6px 1px;
  border: 1px solid var(--ad-accent);
  border-radius: 4px;
  background: transparent;
  color: var(--ad-accent);
  font-weight: 800;
  letter-spacing: .14em;
}

.estate-ad-advertiser {
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  color: #ced1d9;
  font-weight: 700;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

a.estate-ad-advertiser:hover {
  color: var(--ad-accent);
  text-decoration: underline;
}

/* --- the link is a grid; the copy track is what clips ---------------------- */

.estate-ad-link {
  display: grid;
  min-width: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}

/* the whole unit is the product link: the <a> stretches over the card.
   The advertiser and Powered-by links sit above it on z-index 2. */
.estate-ad-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.estate-ad-link:focus-visible,
.estate-ad-anchor-link:focus-visible {
  outline: 2px solid var(--ad-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.estate-ad-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.estate-ad-headline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ad-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.006em;
  line-height: 1.24;
  text-wrap: pretty;
}

.estate-ad-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ad-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42;
}

/* the two empty-body cards collapse cleanly instead of leaving a gap */
.estate-ad-body:empty {
  display: none;
}

/* --- price + CTA: pinned by the grid, never by the copy ------------------- */

.estate-ad-ctarow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.estate-ad-price {
  margin-inline-end: auto;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.estate-ad-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--ad-accent);
  color: var(--ad-accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background .14s ease, transform .14s ease;
}

.estate-ad-cta i {
  font-style: normal;
  transition: transform .14s ease;
}

.estate-ad-link:hover .estate-ad-cta {
  background: #ffd982;
}

.estate-ad-link:hover .estate-ad-cta i {
  transform: translateX(2px);
}

/* --- provenance (rule 5) -------------------------------------------------- */

.estate-ad-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--ad-meta);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* "no tracking" stays, but as a whisper */
.estate-ad-provenance > span {
  opacity: .45;
  font-weight: 500;
}

/* Powered by URSY.AD is the feature — it gets its own chip */
.estate-ad-powered {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 2px 6px 1px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  color: #a2a8b6;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.estate-ad-powered:hover {
  color: var(--ad-accent);
  border-color: var(--ad-accent);
}

/* --- creative plate: pack shot shown whole, on light ---------------------- */

.estate-ad-imgwrap {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 6px;
  border: 0;
  border-radius: 9px;
  background: var(--ad-plate);
  box-shadow: inset 0 0 0 1px rgba(12, 14, 20, .12);
}

.estate-ad-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--estate-ad-img-fit, cover);
  transform: none;
  /* letterbox areas paint plate-ivory, never whatever sits behind */
  background: var(--ad-plate);
}

/* =====  300x250 MPU  ======================================================
   Image moves to a left column, so the copy gets 149px of height instead of
   38px. Headline 3 lines + body 4 lines both fit the worst case.            */

.estate-ad-300x250 {
  width: 300px;
  height: 250px;
  max-width: 100%;
  padding: 10px 12px 9px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 8px;
}

.estate-ad-300x250 .estate-ad-link {
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 11px;
  row-gap: 9px;
}

.estate-ad-imgwrap-300x250 {
  grid-column: 1;
  grid-row: 1;
  width: 112px;
  height: 100%;
}

.estate-ad-300x250 .estate-ad-copy {
  grid-column: 2;
  grid-row: 1;
}

.estate-ad-300x250 .estate-ad-ctarow {
  grid-column: 1 / -1;
  grid-row: 2;
}

.estate-ad-300x250 .estate-ad-headline {
  -webkit-line-clamp: 3;
}

.estate-ad-300x250 .estate-ad-body {
  -webkit-line-clamp: 4;
}

/* =====  728x90 leaderboard  ===============================================
   Row 1 is a meta strip: label left, provenance right — both in flow, so the
   label can no longer sit on top of the copy. Row 2 is the product row.     */

.estate-ad-728x90 {
  width: 728px;
  height: 90px;
  max-width: 100%;
  padding: 7px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 5px;
}

.estate-ad-728x90 .estate-ad-label {
  grid-column: 1;
  grid-row: 1;
}

.estate-ad-728x90 .estate-ad-provenance {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}

.estate-ad-728x90 .estate-ad-link {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 13px;
}

.estate-ad-imgwrap-728x90 {
  width: 52px;
  height: 52px;
  padding: 4px;
}

.estate-ad-728x90 .estate-ad-headline {
  font-size: 14px;
  -webkit-line-clamp: 1;
}

.estate-ad-728x90 .estate-ad-body {
  font-size: 11.5px;
  -webkit-line-clamp: 1;
}

.estate-ad-728x90 .estate-ad-ctarow {
  gap: 14px;
  padding-inline-start: 6px;
}

.estate-ad-728x90 .estate-ad-price {
  margin: 0;
  font-size: 16px;
}

/* =====  160x600 skyscraper  ===============================================
   Taller creative (220px), 4-line headline, 7-line body, and the footer sits
   on a hairline at the bottom — the old dead gap is now a divider.          */

.estate-ad-160x600 {
  width: 160px;
  height: 600px;
  max-width: 100%;
  padding: 11px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 10px;
}

.estate-ad-160x600 .estate-ad-link {
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 10px;
}

.estate-ad-imgwrap-160x600 {
  width: 100%;
  height: 220px;
}

/* short copy centres in the space left over instead of leaving a bottom void */
.estate-ad-160x600 .estate-ad-copy {
  grid-row: 2;
  align-self: center;
  flex: none;
}

.estate-ad-160x600 .estate-ad-headline {
  -webkit-line-clamp: 4;
}

.estate-ad-160x600 .estate-ad-body {
  -webkit-line-clamp: 7;
}

.estate-ad-160x600 .estate-ad-ctarow {
  grid-row: 3;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--ad-line);
}

.estate-ad-160x600 .estate-ad-price {
  margin: 0;
  font-size: 20px;
}

.estate-ad-160x600 .estate-ad-cta {
  justify-content: center;
  padding: 10px 12px;
}

.estate-ad-160x600 .estate-ad-provenance {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: normal;
}

/* =====  320x100 mobile banner  ============================================
   Same meta strip as the leaderboard. Price and CTA stack in a fixed right
   column so the headline always gets its two lines.                         */

.estate-ad-320x100 {
  width: 320px;
  height: 100px;
  max-width: 100%;
  padding: 9px 11px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
}

.estate-ad-320x100 .estate-ad-label {
  grid-column: 1;
  grid-row: 1;
}

.estate-ad-320x100 .estate-ad-provenance {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
}

/* "No tracking" is dropped here for space; Powered by URSY.AD stays */
.estate-ad-320x100 .estate-ad-provenance > span {
  display: none;
}

.estate-ad-320x100 .estate-ad-link {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.estate-ad-imgwrap-320x100 {
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 8px;
}

.estate-ad-320x100 .estate-ad-headline {
  font-size: 13px;
  line-height: 1.26;
}

.estate-ad-320x100 .estate-ad-body {
  display: none;
}

.estate-ad-320x100 .estate-ad-ctarow {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.estate-ad-320x100 .estate-ad-price {
  margin: 0;
  font-size: 14.5px;
}

.estate-ad-320x100 .estate-ad-cta {
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 10.5px;
}

/* =====  anchored phone banner (different markup, no provenance)  ========== */

.estate-ad-anchor {
  --ad-accent: var(--estate-ad-accent, #f2c65c);
  --ad-accent-ink: #1a1405;
  --ad-ink: #14161d;
  --ad-title: #f6f7f9;
  --ad-body: #a4a7b2;
  --ad-meta: #767b8a;
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 5px;
  width: min(320px, calc(100vw - 20px));
  min-height: 64px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: var(--ad-ink);
  color: var(--ad-title);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(10, 11, 15, .45);
}

.estate-ad-anchor .estate-ad-label {
  display: flex;
  margin: 0;
}

.estate-ad-anchor-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* whole anchored banner is clickable too */
.estate-ad-anchor-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.estate-ad-anchor-link strong {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  grid-column: 1;
  color: var(--ad-title);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.estate-ad-anchor-link span {
  grid-column: 1;
  color: var(--ad-body);
  font-size: 11.5px;
  font-weight: 400;
}

/* decorative CTA disc — CSS content, so the renderer stays as it is */
.estate-ad-anchor-link::after {
  content: "\2192";
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ad-accent);
  color: var(--ad-accent-ink);
  font-size: 15px;
  font-weight: 700;
  transition: transform .14s ease;
}

.estate-ad-anchor-link:hover::after {
  transform: translateX(2px);
}

/* =====  dark page (estate convention: [data-theme="dark"] = light card) ====
   On a dark page the advert inverts to a light card so it still reads as an
   advert rather than as editorial. Accent darkens to hold contrast.         */

[data-theme="dark"] .estate-ad,
[data-theme="dark"] .estate-ad-anchor {
  --ad-accent: #a3700a;
  --ad-accent-ink: #fff7e4;
  --ad-ink: #fff;
  --ad-line: rgba(12, 14, 20, .13);
  --ad-title: #0e1016;
  --ad-body: #4b4f5b;
  --ad-meta: #6b7080;
  --ad-plate: #f4f3ef;
  border-color: rgba(12, 14, 20, .13);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .estate-ad-advertiser {
  color: #3b3f4b;
}

[data-theme="dark"] .estate-ad-price {
  color: #0e1016;
}

[data-theme="dark"] .estate-ad-powered {
  color: #5b6070;
  border-color: rgba(12, 14, 20, .22);
}

[data-theme="dark"] .estate-ad-link:hover .estate-ad-cta {
  background: #8a5d04;
}

/* --- RTL ------------------------------------------------------------------ */

body.is-rtl .estate-ad,
body.is-rtl .estate-ad-anchor {
  direction: rtl;
}

body.is-rtl .estate-ad-728x90 .estate-ad-provenance,
body.is-rtl .estate-ad-320x100 .estate-ad-provenance {
  justify-content: flex-end;
}

/* --- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .estate-ad-cta,
  .estate-ad-cta i,
  .estate-ad-anchor-link::after {
    transition: none;
  }
}