/* Tailor-Made Section — section styles
   The dark two-column section: photo collage and numbered steps.
   Loads with the Tour Ceylon +94 theme. Depends on the shared styles
   snippet for the section shell, the container and the small pieces.
   -------------------------------------------------------------------- */

.tc94-tailor { overflow: hidden; }

.tc94-tailor__layout {
  display: grid;
  gap: var(--wp--preset--spacing--90);
  align-items: center;
}

@media (min-width: 64rem) {
  .tc94-tailor__layout {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: var(--wp--preset--spacing--110);
    }
}

.tc94-tailor__collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
}

.tc94-tailor__collage figure {
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--media);
  margin: 0;
}

.tc94-tailor__collage img { width: 100%; height: 100%; object-fit: cover; }

.tc94-tailor__collage figure:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.tc94-tailor__collage figure:nth-child(2) { aspect-ratio: 4 / 5; }

.tc94-tailor__collage figure:nth-child(3) {
  aspect-ratio: 4 / 5;
  align-self: end;
  margin-top: calc(var(--wp--preset--spacing--80) * -1);
  border: 4px solid var(--wp--preset--color--surface-dark);
}

@media (min-width: 48rem) {
  .tc94-tailor__collage figure:nth-child(2) { margin-right: calc(var(--wp--preset--spacing--70) * -1); }

  .tc94-tailor__collage figure:nth-child(3) { margin-left: var(--wp--preset--spacing--60); }
}

.tc94-tailor__note {
  position: relative;
  z-index: var(--wp--custom--zindex--raised);
  /* The note is the collage grid's fourth item, so without this it drops into
     a single 279px column, and margin-left: auto then has nothing to push
     against: min() picks 100%, never the 23rem the card is drawn at, and four
     of its five lines wrap. Spanning the grid gives the card its width back
     and lets it sit right-aligned across the lower edge of the photos, which
     is what the negative margin-top below is pulling it up to overlap. */
  grid-column: 1 / -1;
  margin-top: calc(var(--wp--preset--spacing--80) * -1);
  margin-left: auto;
  width: min(100%, 23rem);
  padding: var(--wp--preset--spacing--60);
  background-color: var(--wp--preset--color--surface-darker);
  border: 1px solid var(--wp--custom--alpha--gold-35);
  border-left: 3px solid var(--wp--preset--color--highlight);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--custom--shadow--xl);
}

.tc94-tailor__note h3 {
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--caps);
  text-transform: uppercase;
  color: var(--wp--preset--color--highlight);
  margin-bottom: var(--wp--preset--spacing--40);
}

.tc94-tailor__note ul {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--on-dark-muted);
  /* This list carries no class, so the shared reset (which targets ul[class])
     skips it and the browser keeps its own 40px indent. The li grid already
     draws the tick in a column of its own, so that indent is dead space. */
  padding: 0;
  list-style: none;
}

.tc94-tailor__note li {
  display: grid;
  grid-template-columns: var(--wp--custom--icon--size-sm) 1fr;
  gap: var(--wp--preset--spacing--30);
  align-items: start;
}

.tc94-tailor__note .tc94-icon {
  width: var(--wp--custom--icon--size-sm);
  height: var(--wp--custom--icon--size-sm);
  margin-top: 5px;
  color: var(--wp--preset--color--highlight);
}

.tc94-tailor__body > * + * { margin-top: var(--wp--preset--spacing--60); }

.tc94-tailor__steps { margin-top: var(--wp--preset--spacing--80); }

.tc94-tailor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--80);
}