/* ==========================================================================
   Book a Consultation — page layout
   Loads after style.css. Owns only .consult*, .pill and .bento*.
   1. Shell / grid    3. Bento grid
   2. Copy column     4. Responsive / motion
   ========================================================================== */

/* 1. Shell / grid ======================================================= */

/* .consult carries no rule of its own — .section already supplies the block
   padding. Keep it that way: an overflow, transform or filter on the wrapper
   or on either column silently kills position:sticky on the form. */
.consult__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
}

/* Grid items default to min-width:auto, which lets a long word or a wide
   input push the column past its track and scroll the page sideways. */
.consult__main,
.consult__aside { min-width: 0; }

/* A sticky child can only travel inside its parent's box, so the aside has to
   stretch to the full row height (set by the taller copy column). Collapsing
   it to content height — align-items:start — gives zero travel and the form
   would scroll away instead of sticking. */
.consult__aside { align-self: stretch; }

.consult__form {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  /* Harmless when nested in .consult__aside; if the markup makes the form the
     grid item itself, this keeps it from stretching and killing the stick. */
  align-self: start;
  padding: 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

/* 2. Copy column ======================================================== */

.pill {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-050);
  border-radius: var(--r-full);
}

.consult__title {
  font-size: clamp(30px, 4.4vw, 48px);
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.12;
  margin-bottom: 18px;
}

.consult__lead {
  max-width: 56ch; /* keeps the measure readable even on a 1440 desktop */
  margin-bottom: 38px;
}

/* 3. Bento grid ========================================================= */

.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.bento__card {
  min-width: 0;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  color: var(--navy-700);
  background: #eef3f9;
  background: color-mix(in srgb, var(--navy-600) 8%, var(--surface));
}
.bento__icon .icon { width: 22px; height: 22px; }

.bento__title {
  font-size: 20px;
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.3;
  margin-bottom: 8px;
}

.bento__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-500);
  margin: 0;
}

.bento__wide {
  grid-column: 1 / -1;
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: var(--r-md);
  isolation: isolate; /* new stacking context so the overlay can't escape the radius */
}

.bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; /* base img rule forces height:auto — restate it */
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.bento__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 28px;
  /* Plain rgba first so pre-color-mix browsers still get a readable scrim. */
  background: linear-gradient(90deg, rgba(6, 32, 67, .92) 0%, rgba(6, 32, 67, .6) 46%, rgba(6, 32, 67, 0) 100%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--navy-900) 92%, transparent) 0%,
    color-mix(in srgb, var(--navy-900) 60%, transparent) 46%,
    transparent 100%);
}
.bento__overlay .bento__title { color: #fff; }
.bento__overlay .bento__text {
  max-width: 42ch;
  color: rgba(255, 255, 255, .82);
}

/* -- Hover affordances --------------------------------------------------- */
/* Scoped to real pointers because style.css neutralises hover lifts on touch:
   without the gate a tap leaves the card raised and the image zoomed. */
@media (hover: hover) and (pointer: fine) {
  .bento__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: transparent;
  }
  .bento__wide:hover .bento__img { transform: scale(1.06); }
}

/* 4. Responsive / motion ================================================ */

/* Between the mobile breakpoint and the full container the 5fr form column
   gets tight, so buy it back from the gap rather than the track. */
@media (min-width: 961px) and (max-width: 1200px) {
  .consult__grid { gap: 40px; }
  .bento { gap: 18px; }
}

@media (max-width: 960px) {
  .consult__grid { grid-template-columns: 1fr; gap: 48px; }
  /* Single column reads copy-then-form regardless of the source order. */
  .consult__main { order: 1; }
  .consult__aside { order: 2; }
  /* Sticky in one column pins the form over the content and traps the page. */
  .consult__form { position: static; }
}

@media (max-width: 720px) {
  .consult__form { padding: 26px 22px; }
  .consult__lead { margin-bottom: 30px; }
  .bento__wide { height: 220px; }
  .bento__overlay { padding: 22px 20px; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bento__card { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bento__card,
  .bento__img { transition: none; }
  .bento__card:hover { transform: none; }
  .bento__wide:hover .bento__img { transform: none; }
}