/* ============================================================
   page-alt.css — shared components for the alt-style EN subpages
   (About / Services / Listings / Contact). Loads AFTER home-alt.css
   and reuses its tokens, header, footer, buttons, and section
   titles. Holds the pieces the subpages need beyond the home.
   ============================================================ */

/* Eyebrow label on light sections */
.alt-eyebrow {
  display: inline-block;
  font-family: var(--font-condensed); font-weight: 600;
  font-size: .875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
}

/* ============================================================
   PAGE HERO (dark band) — shared by every subpage
   ============================================================ */
.alt-phero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(8,18,30,.5) 0%, rgba(11,28,48,.7) 100%),
    radial-gradient(120% 110% at 82% 8%, #1d3a5c 0%, #122a44 46%, #0b1c30 100%);
  color: var(--on-dark);
  overflow: hidden;
}
.alt-phero-inner {
  display: grid; grid-template-columns: 1.25fr auto; align-items: center; gap: 2.5rem;
  padding-block: 4.5rem 0; /* block-only so the .container side gutter survives — hero lines up with page content */
  min-height: 340px;
}
.alt-phero--simple .alt-phero-inner { grid-template-columns: 1fr; padding-block: 4.5rem; min-height: 0; }
/* The simple hero already gets its bottom spacing from the inner padding-block,
   so the copy's own bottom padding would double it into a big empty gap. */
.alt-phero--simple .alt-phero-copy { max-width: 760px; padding-bottom: 0; }
.alt-phero-copy { max-width: 660px; padding-bottom: 4.5rem; }
.alt-phero-eyebrow {
  font-family: var(--font-condensed); font-weight: 600;
  font-size: .875rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 1rem;
}
.alt-phero-title {
  font-family: var(--font-condensed); font-weight: 700;
  font-size: clamp(2rem, 1rem + 2.6vw, 3rem); line-height: 1.08;
  text-transform: uppercase; color: #fff; margin: 0 0 1.3rem;
}
.alt-phero-title em {
  font-style: normal; /* slogan stays one font (condensed, uppercase) like the home hero */
}
.alt-phero-lead { font-size: 1.125rem; line-height: 1.7; color: var(--on-dark-soft); margin: 0; max-width: 54ch; }
.alt-phero-portrait { align-self: end; }
.alt-phero-portrait img { width: clamp(300px, 34vw, 480px); height: auto; display: block; } /* match home hero photo size */

/* ============================================================
   PROSE / NARRATIVE (light)
   ============================================================ */
.alt-prose-section { padding: 5.5rem 0; background: var(--paper); }
.alt-prose-section--alt { background: var(--cream); }
.alt-prose { max-width: 840px; margin: 0 auto; text-align: center; }
.alt-prose p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.5rem; }
.alt-prose p:last-child { margin-bottom: 0; }

/* Match the home "About Victor" section format: left-aligned head + prose,
   wider measure, badges stay centered. (.alt-section-head is shared with the
   home's centered sections, so this is scoped to .alt-prose-section.) */
.alt-prose-section .alt-section-head { text-align: left; }
.alt-prose-section .alt-section-rule { margin-left: 0; }
.alt-prose-section .alt-prose { max-width: 980px; margin-inline: 0; text-align: left; }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.alt-pullquote { background: var(--cream); padding: 5.5rem 0; }
.alt-pullquote blockquote { margin: 0 auto; max-width: 900px; text-align: center; }
.alt-pullquote-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.3vw, 2.25rem); line-height: 1.45;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.alt-pullquote-body::before { content: '\201C'; }
.alt-pullquote-body::after  { content: '\201D'; }
.alt-pullquote-body em { font-family: var(--font-display); font-style: normal; color: var(--navy); }
.alt-pullquote-attr { margin-top: 1.75rem; }
.alt-pullquote-attr .name { display: block; font-weight: 700; font-size: 1rem; color: var(--ink); }
.alt-pullquote-attr .role { display: block; font-size: .875rem; color: var(--ink-soft); }

/* ============================================================
   WHY band — numbered variant (reuses .alt-why from home-alt.css)
   ============================================================ */
.alt-why .alt-section-rule { background: var(--accent-on-dark); }
.alt-why-col { text-align: left; }
.alt-why-num {
  display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: #fff; opacity: .55; margin-bottom: .75rem;
}

/* ============================================================
   SIMPLE CENTERED SECTION
   ============================================================ */
.alt-centered { padding: 5.5rem 0; background: var(--paper); text-align: center; }
.alt-centered--alt { background: var(--cream); }
.alt-centered-body { max-width: 760px; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); }

/* ============================================================
   GENERIC IFRAME WRAP (listings on subpages)
   ============================================================ */
.alt-psection { padding: 5.5rem 0; background: var(--paper); }
.alt-psection--alt { padding: 5.5rem 0; background: var(--cream); }

.alt-note {
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 0 0 2.5rem; padding: 1rem 1.25rem; /* full container width to match the iframe below */
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}
.alt-note svg { width: 20px; height: 20px; flex: none; color: var(--navy); margin-top: 2px; }
.alt-note strong { color: var(--ink); }
.alt-note a { color: var(--navy); text-decoration: underline; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.alt-contact { padding: 5.5rem 0; background: var(--paper); }
.alt-contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }

/* Light-surface form variant (overrides the dark footer-form styles) */
.alt-form--light .form-group label { color: var(--ink-soft); }
.alt-form--light .form-group input,
.alt-form--light .form-group textarea,
.alt-form--light select {
  width: 100%; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line);
  padding: .55rem 0; font-family: inherit; font-size: 1rem;
}
.alt-form--light select { padding: .55rem 0; }
.alt-form--light .form-group input::placeholder,
.alt-form--light .form-group textarea::placeholder { color: #9aa3ac; }
.alt-form--light .form-group input:focus,
.alt-form--light .form-group textarea:focus,
.alt-form--light select:focus { outline: none; border-bottom-color: var(--navy); }
.alt-form--light .form-group textarea { resize: vertical; min-height: 110px; }

.alt-contact-info h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 1.6vw, 2.25rem); color: var(--ink); /* caps at 36px h2 scale */
  margin: 0 0 1.5rem;
}
.alt-contact-methods { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.alt-contact-methods li { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.alt-contact-method-icon {
  flex: none; color: var(--navy); display: flex; align-items: center; justify-content: center;
  width: 26px; /* hold the column width so labels line up; no circle */
}
.alt-contact-method-icon svg { width: 24px; height: 24px; }
.alt-contact-method-label { font-family: var(--font-condensed); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.alt-contact-method-value { font-size: 1rem; color: var(--ink); }
.alt-contact-method-value a:hover { color: var(--navy); text-decoration: underline; }
.alt-wechat-qr { margin: 0; }
.alt-wechat-qr img { width: 150px; height: auto; border: 1px solid var(--line); margin-top: .4rem; display: block; }
.alt-wechat-qr figcaption { font-size: .875rem; color: var(--ink-soft); margin-top: .4rem; }
.alt-contact-note { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.alt-office-info { font-size: .875rem; color: var(--ink-soft); margin-top: 1rem; }

/* On the contact page, the body carries the form — collapse the duplicate footer form. */
.alt-contact-page .alt-footer-grid { grid-template-columns: 1fr; }
.alt-contact-page .alt-footer-grid > div:last-child { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .alt-phero-inner { grid-template-columns: 1fr; padding-bottom: 0; }
  .alt-phero-copy { padding-bottom: 4rem; }
  .alt-phero-portrait { display: none; }
  .alt-why-col { text-align: center; }
  .alt-contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}