/* ==========================================================================
   A1 — Firm promo block MyRoomTool (page-level)
   Desktop: panel locked 4:1; media uses background-size: cover (no stretch).
   Mobile (≤768): title + text above media; CTA overlays media only.
   Media URL → Builder inline on .block-a1__media. Editorial → Shared CSS.
   ========================================================================== */

.block-a1 {
  width: 100%;
}

.block-a1__panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* Canonical desktop geometry — independent of text volume and image file ratio. */
  aspect-ratio: 4 / 1;
  overflow: hidden;
  padding: var(--space-l);
  display: flex;
  align-items: center;
  background-color: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Full-bleed photo plane (Builder sets background-image inline). */
.block-a1__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  background-color: var(--color-surface-muted);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.block-a1__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 50%;
  max-width: 50%;
  min-width: 0;
}

/* Actions cluster — A1 composition */
.block-a1__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
}

.block-a1__actions:not(:has(.block-a1__cta:not([hidden]))):not(:has([data-slot="links"]:not([hidden]))):not(:has([data-slot="downloads"]:not([hidden]))) {
  display: none;
  margin-top: 0;
}

.block-a1__cta {
  align-self: flex-start;
}

.block-a1__cta[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Theme (desktop overlay) — same semantics as HERO / C1
   light = white text on dark photo; dark = brand text on light photo.
   Default / omitted MRT theme → block-a1--dark (current look).
   -------------------------------------------------------------------------- */

.block-a1--light .block-a1__title,
.block-a1--light .block-a1__text,
.block-a1--light .block-a1__text p {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(34, 50, 69, 0.4),
    0 6px 20px rgba(34, 50, 69, 0.45);
}

.block-a1--dark .block-a1__title,
.block-a1--dark .block-a1__text,
.block-a1:not(.block-a1--light) .block-a1__title,
.block-a1:not(.block-a1--light) .block-a1__text {
  color: var(--color-text);
  text-shadow: none;
}

/*
  Secondary links on light overlay: white for contrast on dark photos;
  hover → accent (same idea as Hero TOC / C1 title hover).
  CTA button is unaffected.
*/
.block-a1--light .block-a1__links .editorial-link,
.block-a1--light .block-a1__link {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(34, 50, 69, 0.35),
    0 4px 12px rgba(34, 50, 69, 0.35);
}

.block-a1--light .block-a1__links .editorial-link:hover,
.block-a1--light .block-a1__link:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  /*
    Mobile: TITLE → TEXT → [IMAGE + BUTTON].
    display:contents lifts title/text/actions into the panel grid.
  */
  .block-a1__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: stretch;
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    gap: 0;
  }

  .block-a1__media {
    position: relative;
    inset: auto;
    grid-row: 3;
    grid-column: 1;
    width: 100%;
    /* Phone media plane — not 4:1; crop via cover from the left (keep right side). */
    aspect-ratio: 2 / 1;
    background-position: right center;
    border-radius: 0;
    pointer-events: none;
  }

  .block-a1__content {
    display: contents;
    width: auto;
    max-width: none;
  }

  .block-a1__title {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    padding: var(--space-m) var(--space-m) var(--space-s);
  }

  .block-a1__text {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    padding: 0 var(--space-m) var(--space-m);
  }

  /* No title: give text the top inset the title would have provided. */
  .block-a1__panel:not(:has(.block-a1__title:not(:empty))) .block-a1__text {
    padding-top: var(--space-m);
  }

  .block-a1__actions {
    grid-row: 3;
    grid-column: 1;
    z-index: 1;
    align-self: end;
    justify-self: start;
    width: auto;
    max-width: calc(100% - var(--space-m) * 2);
    margin: 0;
    padding: var(--space-m);
    flex-direction: column;
    align-items: flex-start;
  }

  .block-a1__cta {
    width: auto;
    justify-content: center;
    text-align: center;
  }

  /*
    Title/text sit above the image on the page surface — always brand color,
    regardless of theme: light | dark.
  */
  .block-a1--light .block-a1__title,
  .block-a1--light .block-a1__text,
  .block-a1--light .block-a1__text p,
  .block-a1--dark .block-a1__title,
  .block-a1--dark .block-a1__text,
  .block-a1--light .block-a1__links .editorial-link,
  .block-a1--light .block-a1__link {
    color: var(--color-text);
    text-shadow: none;
  }

  .block-a1--light .block-a1__links .editorial-link:hover,
  .block-a1--light .block-a1__link:hover {
    color: var(--color-accent);
  }
}