/* Contact page only. Shared pieces (hero, bands, cards, .card--panel, buttons, status, ornament)
   live in core.css. Layout follows the original Contact Us page: four info cards in a row, then a
   two column block. The form of the original is gone (owner's note): its place holds the large
   Call now panel; the map slot holds the Release form card, above Follow the Glow.
   Widths: info cards 4 across from 1280px, 2 by 2 from 600px, rows (icon left) on phones; the
   panel sits beside the two side cards from 1280px and spans the full width below that. */

.ct-band { padding-block: clamp(56px, 2.5rem + 3.5vw, 112px); }

/* ---------- the four info cards ---------- */
.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ct-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-lg);
}
.ct-card .icon-ring { margin: 0; }
.ct-card__body { min-width: 0; }
.ct-card__title {
  margin: 2px 0 6px;
  font-size: 1.375rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 24;
}
.ct-card__main { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--fg); }
.ct-card__sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--fg-2); }
.ct-card__go { position: relative; margin-top: 10px; font-size: var(--fs-small); }
.ct-card__go::before { content: ""; position: absolute; inset: -10px -8px; } /* a 44px tall hit area */
.ct-card__go .icon { width: 16px; height: 16px; }
.ct-card__go:hover .icon, .ct-card__go:focus-visible .icon { transform: translate(2px, -2px); }

/* Call and Email: the whole card is the link (a stretched hit area), so a tap anywhere dials.
   The focus ring is drawn around the card by the link's overlay. */
.ct-card__stretch {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.ct-card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.ct-card__stretch:focus-visible { outline: none; }
.ct-card__stretch:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.ct-card--link:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ct-card--link:hover .ct-card__stretch,
.ct-card__stretch:focus-visible { background-size: 100% 1px, 100% 1px; }
.ct-card--link:focus-within { border-color: var(--line-strong); }

/* hours: two lines (centred from 600px), today's line brighter, then the live status */
.ct-hours { margin: 0; display: grid; gap: 2px; }
.ct-hours__row { display: flex; flex-wrap: wrap; gap: 0 8px; line-height: 1.5; font-size: 1.0625rem; color: var(--fg-2); }
.ct-hours dt { font-weight: 500; }
.ct-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.ct-hours__row.is-today { color: var(--fg); }
.ct-hours__row.is-today dt { font-weight: 600; }
.ct-card .status { margin-top: 12px; }

@media (min-width: 600px) {
  .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ct-card {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 36px 24px 34px;
    text-align: center;
  }
  .ct-card .icon-ring { margin-bottom: 20px; }
  .ct-card__title { margin: 0 0 10px; font-size: 1.625rem; }
  .ct-card__sub { margin-top: 4px; }
  .ct-card__go { margin-top: 12px; }
  .ct-hours__row { justify-content: center; }
  .ct-card .status { margin-top: 14px; }
}
@media (min-width: 1280px) {
  .ct-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* ---------- the two column block: Call now panel | release form + follow the glow ---------- */
.ct-main { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ct-main { gap: 16px; margin-top: 16px; } }
@media (min-width: 760px) {
  .ct-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-call { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .ct-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 24px; }
  .ct-call { grid-column: 1; grid-row: 1 / span 2; }
}

/* the Call now panel (plum, the original's "Send a Message" box) */
.ct-call {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(28px, 1.1rem + 2.6vw, 56px);
}
/* the italic half sits on its own line, as "Tan Better." does in the Home hero */
.ct-call__head h2 em { display: block; }
.ct-call .ornament { max-width: 220px; margin: 0 0 28px; }
.ct-call > :not(.ct-call__sun) { position: relative; }
.ct-call__sun {
  position: absolute; top: clamp(28px, 1.1rem + 2.6vw, 56px); right: clamp(28px, 1.1rem + 2.6vw, 56px);
  width: clamp(150px, 7rem + 6vw, 230px); height: auto;
  fill: none; stroke: var(--pink); stroke-width: 1; stroke-linecap: round; opacity: 0.38;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.ct-call__sun * { vector-effect: non-scaling-stroke; }
@media (max-width: 759.98px) { .ct-call__sun { display: none; } }
/* The number is set in Bodoni at a low optical size: at the higher masters the hairlines of the
   digits nearly vanish (the same finding as the Packages prices). */
.ct-call__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variation-settings: "opsz" 16;
}
.ct-call__num a { color: var(--fg); text-decoration: none; transition: color 0.25s var(--ease); }
.ct-call__num a:hover { color: var(--pink-hover); }
.ct-call__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.ct-call__row .status { margin: 0; }

/* the two side cards: ring and title side by side, the text below. The text is indented under
   the title only where the card is wide (480 to 759px, and from 960px); in the narrower tablet
   columns it runs full width so lines stay comfortable. */
.ct-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "body body";
  align-items: center;
  align-content: start;
  gap: 16px 18px;
  padding: 24px 22px 26px;
  border-radius: var(--radius-lg);
}
.ct-side .icon-ring { grid-area: icon; margin: 0; }
.ct-side__title {
  grid-area: title;
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  line-height: 1.2;
  font-variation-settings: "opsz" 24;
}
.ct-side__body { grid-area: body; min-width: 0; }
.ct-release { scroll-margin-top: 24px; }
.ct-release:target { border-color: var(--line-strong); }
.ct-release__btn { margin-top: 20px; }
.ct-social {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; max-width: 404px;
}
.ct-social .btn { width: 100%; padding-inline: 12px; }
.ct-follow .card__text .link { font-weight: 500; }
.ct-nowrap { white-space: nowrap; }

@media (min-width: 480px) {
  .ct-side { padding: clamp(24px, 1.1rem + 1vw, 36px); }
}
@media (min-width: 480px) and (max-width: 759.98px), (min-width: 960px) {
  .ct-side { grid-template-areas: "icon title" ". body"; row-gap: 6px; }
  .ct-social { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-card--link:hover { transform: none; }
}