/* ==========================================================================
   STUDIO — pages/contact.css
   Sections that belong to contact.html only. Everything reusable (panel,
   field, badge, label, btn, split, shead, phead) comes from the kit.

   House rules obeyed:
     · NO gradients. Flat colour or nothing.
     · Hairlines do the containment — no drop shadows on a card.
     · Radii 8–12px. Motion 150–220ms ease-out, no spring.
     · Logical properties only, so RTL lands correctly.
     · EVERY colour is a token — dark mode falls out for free.
   ========================================================================== */

/* ==========================================================================
   0. THE SLIM PAGE HEADER
   A crumb, a modest h1, one line of sub-copy. The form is the point of this
   page, so the page head gets out of its way. `.phead--slim` is a KIT
   component (components.css) — shared with products, categories and agents —
   and this page overrides nothing in it.
   ========================================================================== */

/* ==========================================================================
   1. THE FORM PANEL — the first thing on the page, and the widest column.
   ========================================================================== */
/* the page head is slim, so the form must start almost immediately */
.ct-main { padding-block-start: calc(var(--section-y) * 0.55); }

.ct-col { min-inline-size: 0; }

/* 22 → 28: under the h1, over the card titles. */
.ct-panel__title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  letter-spacing: var(--ls-head);
  margin-block-start: var(--sp-3);
}
.ct-panel__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: 56ch;
  margin-block: var(--sp-3) var(--sp-7);
}

.ct-form { display: grid; gap: var(--sp-5); }

/* A .field is a grid, and a grid ITEM stretches by default — so in the 2-up
   row the field WITHOUT a hint (name) grew its input taller than the field
   WITH one (mobile), and the two boxes stopped lining up. Pin the rows to the
   start and both inputs keep their natural height and share a baseline. */
.ct-form .field { align-content: start; }

/* the phone/email inputs stay LTR even in Arabic — digits and latin only */
.ct-form .input[dir="ltr"] { text-align: start; }
[dir="rtl"] .ct-form .input[dir="ltr"] { text-align: right; }

.ct-form__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-1);
}
.ct-form__legal {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  max-inline-size: 34ch;
}

.ct-form__demo {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.ct-form__demo svg {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  margin-block-start: 2px;
}

/* --- the submit button's two states ------------------------------------
   A page sheet loads LAST, so a single class beats components.css here. The
   states are swapped by a class on the button, never by inline display JS. */
.ct-form__send { position: relative; }
.ct-form__sending { display: none; align-items: center; gap: var(--sp-3); }

.ct-form__send.is-loading { pointer-events: none; }
.ct-form__send.is-loading .ct-form__idle { display: none; }
.ct-form__send.is-loading .ct-form__sending { display: inline-flex; }
/* the button is `disabled` while it sends, but BUSY is not the same as
   DISABLED — .btn:disabled would fade it to 45% and the spinner with it.
   (0,3,0) beats components.css's (0,2,0). */
.ct-form__send.is-loading:disabled { opacity: 1; }

.ct-form__idle { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* a hairline ring, not a pillowy spinner */
.ct-form__spin {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-block-start-color: #fff;
  border-radius: 50%;
  animation: ct-spin 700ms linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ct-form__spin { animation: none; }
}

/* --- the success state ------------------------------------------------- */
.ct-sent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-6);
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
}
.ct-sent__ico {
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--success-border);
  color: var(--success);
}
.ct-sent__ico svg { inline-size: 18px; block-size: 18px; }
.ct-sent__body { display: grid; gap: 2px; min-inline-size: 0; }
.ct-sent__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.ct-sent__msg { font-size: var(--fs-sm); color: var(--text-muted); }
.ct-sent__again { grid-column: 1 / -1; justify-self: start; }

/* ==========================================================================
   2. THE ASIDE — three hairline cards: hours · social · the RFQ steer.
   ========================================================================== */
.ct-aside {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-inline-size: 0;
}

.ct-card {
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: var(--sp-6);
  min-inline-size: 0;
}

.ct-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block-end: var(--sp-4);
  margin-block-end: var(--sp-4);
  border-block-end: var(--border-1);
}
.ct-card__ico {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--border-1);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
}
.ct-card__ico svg { inline-size: 16px; block-size: 16px; }
.ct-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  min-inline-size: 0;
}
.ct-card__note {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* --- business hours ----------------------------------------------------- */
.ct-hours { list-style: none; display: grid; }
.ct-hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  border-block-end: var(--border-1);
}
.ct-hours__row:first-child { padding-block-start: 0; }
.ct-hours__row:last-child { border-block-end: 0; padding-block-end: 0; }

.ct-hours__days {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-secondary);
  min-inline-size: 0;
}
.ct-hours__today {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
  padding: 2px var(--sp-2);
  border: 1px solid var(--accent-wash-bd);
  border-radius: var(--r-xs);
  background: var(--accent-wash);
  white-space: nowrap;
}
[dir="rtl"] .ct-hours__today { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }

.ct-hours__time {
  color: var(--text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
/* Between 960 (where the aside first appears) and 1200 the column is narrow
   enough that "Sunday – Thursday" + the TODAY chip + the time break onto two
   lines. Step the row down one size and it sits on one line again. */
@media (min-width: 960px) and (max-width: 1199px) {
  .ct-hours__row { font-size: var(--fs-xs); }
  .ct-hours__today { padding-inline: 5px; }
}
.ct-hours__row.is-today .ct-hours__days { color: var(--text); font-weight: var(--fw-medium); }
.ct-hours__row.is-closed .ct-hours__time {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* --- follow us ---------------------------------------------------------- */
.ct-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ct-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding-inline: var(--sp-4);
  border: var(--border-1);
  border-radius: var(--r);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  transition: var(--t-color);
}
.ct-social__link:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-hover);
}
.ct-social__link svg { inline-size: 16px; block-size: 16px; flex: none; }
.ct-social__link:hover svg { color: var(--accent); }

/* --- the RFQ steer ------------------------------------------------------ */
.ct-quote { background: var(--bg-surface); }
.ct-quote__badge { margin-block-end: var(--sp-4); }
.ct-quote__badge svg { inline-size: 13px; block-size: 13px; flex: none; }
.ct-quote__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.ct-quote__body {
  margin-block: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.ct-quote__fine {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
   3. THE CHANNELS — a flush, ruled grid. The 1px "gaps" ARE the hairlines:
   one border token, collapsed, in both light and dark. No shadows.
   ========================================================================== */
/* the section heading is deliberately no louder than the form's — the h1
   stays the top of the hierarchy on a page that is really one form. */
.ct-direct .shead__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }

.ct-chan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  margin-block-start: var(--sp-8);
  background: var(--border);
  border: var(--border-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ct-chan__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg);
  min-inline-size: 0;
}

.ct-chan__ico {
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--border-1);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
  margin-block-end: var(--sp-1);
}
.ct-chan__ico svg { inline-size: 18px; block-size: 18px; }
/* the one flat red glyph in this grid — WhatsApp is the fastest channel */
.ct-chan__card--wa .ct-chan__ico {
  color: var(--accent);
  border-color: var(--accent-wash-bd);
  background: var(--accent-wash);
}

.ct-chan__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.ct-chan__sub {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.ct-chan__list { list-style: none; display: grid; margin-block-start: var(--sp-1); }
.ct-chan__list > li + li { border-block-start: var(--border-1); }

.ct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 44px;
  padding-block: var(--sp-2);
  color: var(--text);
  transition: var(--t-color);
}
.ct-row__body { display: grid; gap: 1px; min-inline-size: 0; }
.ct-row__kind { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.ct-row__val {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ct-row__go {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--text-muted);
  transition: var(--t-color), var(--t-transform);
}
[dir="rtl"] .ct-row__go { transform: scaleX(-1); }
.ct-row:hover { color: var(--text-accent); }
.ct-row:hover .ct-row__go { color: var(--text-accent); transform: translateX(2px); }
[dir="rtl"] .ct-row:hover .ct-row__go { transform: scaleX(-1) translateX(2px); }

.ct-chan__addr {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.ct-chan__addr-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-block-end: 2px;
}

/* the CTA is pinned to the foot of its cell so the row of cards squares off */
.ct-chan__cta {
  margin-block-start: auto;
  align-self: start;
}

/* ==========================================================================
   4. THE CLOSING CTA — the page's one dark band.
   ========================================================================== */
.ct-cta {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .ct-cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--sp-10); }
}
.ct-cta__text { min-inline-size: 0; }
.ct-cta__title {
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);   /* 24 → 32 */
  letter-spacing: var(--ls-head);
  color: var(--text-on-ink);
  max-inline-size: 18ch;
}
.ct-cta__lead {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-ink-mut);
  max-inline-size: 58ch;
}
.ct-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  min-inline-size: 0;
}
@media (min-width: 900px) {
  .ct-cta__actions { justify-content: flex-end; }
}

/* ==========================================================================
   5. FIT — 360 up. Nothing overflows, nothing is clipped.
   ========================================================================== */
@media (max-width: 560px) {
  .ct-panel { padding: var(--sp-5); }
  .ct-card { padding: var(--sp-5); }
  .ct-chan__card { padding: var(--sp-5); }
  .ct-sent { padding: var(--sp-5); }

  .ct-form__foot .ct-form__send { inline-size: 100%; justify-content: center; }
  .ct-form__legal { max-inline-size: none; }

  .ct-cta__actions .btn { inline-size: 100%; }
}