/**
 * @file entities/node-type.tw-adopt.css
 * tw_adopt page styling. Attached via hook_preprocess_node() (wwf_tw.theme)
 * only where a tw_adopt node renders.
 *
 * Must stay UNLAYERED: it overrides unlayered module styles (webform_shortcut)
 * and unlayered rules win over any @layer.
 */

/* The webform_shortcut panel hosting the adoption cards takes the cards' own
   surface token, so the relocated form reads as one piece with them. Set
   through the module's --wfs-bg custom property (its background-color rule
   reads it), so it wins regardless of stylesheet order. The .js- prefix lifts
   width/gap over the module's same-specificity panel rules (see below). */
.js-webform-shortcut .webform-shortcut__panel:has(.wwf-adopt) {
  --wfs-bg: var(--wwf-color-surface-tint, #e6e3d7);
  /* Full token width (not shrink-to-fit), so the cards can stretch to 100% of
     the panel instead of stopping at their intrinsic width; no flex gap, so no
     sibling (banner text slot) can shave width off the cards row. */
  width: var(--wfs-panel-w);
  gap: 0;
}

/* The webform fieldset around the cards brings default margins that keep the
   cards off the panel edges. */
.webform-shortcut__panel .adoption-cards--wrapper {
  margin: 0;
}

/* The moved slot is a flex item of the panel; let it take the full row, and
   lay its content as a plain block (the module's inner flex would shrink the
   fieldset to fit, leaving the cards narrower than the panel), so the cards
   stretch to 100% of the panel width. :has() lifts the specificity over the
   module's slot rules, which would otherwise tie and fall to stylesheet
   order. */
.webform-shortcut__panel:has(.wwf-adopt) .webform-shortcut__moved {
  flex: 1;
  min-width: 0;
  display: block;
  /* The module's slot gap (0.5rem each axis) has no business around the
     full-bleed cards. */
  gap: 0;
}

/* Inside the panel the cards always use the stacked mobile composition (the
   adopt-options component's <48rem block): the panel is a ~28rem dropdown, so
   the desktop side-by-side overlap has no room there. Selectors ride on
   .webform-shortcut__panel for specificity over the component's rules. */
@media (min-width: 48rem) {
  .webform-shortcut__panel .wwf-adopt .wwf-adopt__cards {
    display: block;
  }
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card] {
    position: relative;
    display: grid;
    /* Mirrors the component's stacked grid (12rem head column: the deductible
       line wraps in two lines, not three). */
    grid-template-columns: 12rem 1fr;
    align-items: stretch;
    width: auto;
    margin-top: 0;
    margin-left: 0;
  }
  .webform-shortcut__panel .wwf-adopt__card + .wwf-adopt__card[data-adopt-card] {
    margin-top: 1rem;
  }
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card='digital'] {
    padding: 12px;
  }
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card='digital'] .wwf-adopt__head {
    padding-inline-start: 18px;
  }
  .webform-shortcut__panel .wwf-adopt__card.is-active {
    border-radius: 0;
  }
  .webform-shortcut__panel .wwf-adopt__card :has(> .wwf-adopt__reveal) {
    display: contents;
  }
  .webform-shortcut__panel .wwf-adopt__card .wwf-card__panel,
  .webform-shortcut__panel .wwf-adopt .wwf-adopt__head {
    grid-column: 1;
  }
  .webform-shortcut__panel .wwf-adopt .wwf-adopt__features {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 0;
    padding: 18px 18px 18px 0;
  }
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card='classic'] .wwf-adopt__features {
    padding-top: 56px;
  }
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card='digital'] .wwf-adopt__features {
    padding-top: 0;
  }
  .webform-shortcut__panel .wwf-adopt .wwf-adopt__reveal {
    grid-column: 1 / -1;
  }
  .webform-shortcut__panel .wwf-adopt__card > div:has(> .wwf-adopt__cta-btn) {
    grid-column: 1 / -1;
    margin-top: 1rem;
  }
}

/* adopt-options.js overlaps the active card over whatever follows the cards
   on phones through an inline negative bottom margin; inside the panel there
   is nothing to overlap, and the pulled-up layout just registers as phantom
   overflow on the panel (a scrollbar with free screen below). !important is
   required to beat the inline style. */
.webform-shortcut__panel .wwf-adopt__card.is-active {
  margin-bottom: 0 !important;
}

/* The classic card keeps its white sub-box in the panel (white panel + the
   bullets' white continuation), like the hero composition. Under 48rem the
   component's stacked base already paints it; from 48rem the component's
   desktop block flattens the bullets for the hero side-by-side, so restate
   the white here (the panel selector outweighs it). */
@media (min-width: 48rem) {
  .webform-shortcut__panel .wwf-adopt__card[data-adopt-card='classic'] .wwf-adopt__features {
    background: #fff;
  }
}