/* ============================================
   Cosmetic Homepage — Contact Page CSS
   Scoped under .cshp-contact
   ============================================ */

/* ---------- Tokens (same as homepage/service) ---------- */
.cshp-contact {
  --cshp-bg:          #efe9df;
  --cshp-bg-2:        #e7e0d3;
  --cshp-surface:     #ffffff;
  --cshp-surface-2:   #f6f1e8;
  --cshp-ink:         #1a1612;
  --cshp-ink-2:       #5b5249;
  --cshp-ink-3:       #6f665e;
  --cshp-line:        #d9d0c3;
  --cshp-line-2:      #c9bfaf;
  --cshp-accent:      #af6a7c;
  /* Акцент как ТЕКСТ. Сам --cshp-accent остаётся фирменным цветом заливок
     и декора: #af6a7c даёт всего 3,36:1 на фоне и 4,06 на белом, то есть
     как текст не проходит. Отдельный токен позволяет починить контраст,
     не трогая бренд там, где цвет работает пятном. */
  --cshp-accent-text: #945264;
  --cshp-accent-deep: #5e2a3a;

  --cshp-serif: "Cormorant Garamond", "Times New Roman", serif;
  --cshp-sans:  "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cshp-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --cshp-container: 1320px;
  --cshp-gutter: 32px;

  font-family: var(--cshp-sans);
  color: var(--cshp-ink);
  -webkit-font-smoothing: antialiased;
}

/* Palette variants */
.cshp-contact[data-palette="sand"]{ --cshp-bg:#efe9df; --cshp-bg-2:#e7e0d3; --cshp-surface:#fff; --cshp-ink:#1a1612; --cshp-ink-2:#5b5249; --cshp-line:#d9d0c3; }
.cshp-contact[data-palette="bone"]{ --cshp-bg:#f4f1ec; --cshp-bg-2:#ebe6dd; --cshp-surface:#fff; --cshp-ink:#171514; --cshp-ink-2:#56504a; --cshp-line:#e1dad0; }
.cshp-contact[data-palette="clay"]{ --cshp-bg:#eadfd1; --cshp-bg-2:#dfd1bd; --cshp-surface:#fdf9f2; --cshp-ink:#1d160f; --cshp-ink-2:#5a4d3e; --cshp-line:#cdbfa8; }
.cshp-contact[data-palette="ash"] { --cshp-bg:#ececeb; --cshp-bg-2:#e1e1df; --cshp-surface:#fff; --cshp-ink:#15171a; --cshp-ink-2:#4f5359; --cshp-line:#d1d2d0; }
.cshp-contact[data-accent="rust"]    { --cshp-accent:#af6a7c; }
.cshp-contact[data-accent="bordeaux"]{ --cshp-accent:#7a2d2f; }
.cshp-contact[data-accent="forest"]  { --cshp-accent:#3e5a44; }
.cshp-contact[data-accent="ink"]     { --cshp-accent:#1a1612; }

.cshp-contact *, .cshp-contact *::before, .cshp-contact *::after { box-sizing: border-box; }
.cshp-contact a { color: inherit; text-decoration: none; }
.cshp-contact img { display: block; max-width: 100%; }

/* ---------- Utility classes ---------- */
.cshp-contact .cshp-container {
  width: 100%; max-width: var(--cshp-container);
  margin: 0 auto; padding: 0 var(--cshp-gutter);
}

.cshp-contact .cshp-eyebrow {
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--cshp-ink-2);
  display: block; margin-bottom: 16px;
}

.cshp-contact .cshp-display {
  font-family: var(--cshp-serif);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.01em;
  color: var(--cshp-ink); margin: 0;
}
/* Заголовок здесь длинный по делу — в нём три города, и резать его нельзя:
   это то, по чему страницу находят. Но 5,5vw давали пять строк и весь первый
   экран под один заголовок. Ограничиваем ещё и по высоте окна, как на
   страницах услуг. */
.cshp-contact .cshp-h1 { font-size: clamp(34px, min(4vw, 6.4vh), 60px); }
.cshp-contact .cshp-h2 { font-size: clamp(32px, 3.6vw, 52px); }

.cshp-contact .cshp-body-lg {
  font-size: 17px; line-height: 1.6; color: var(--cshp-ink-2); margin: 30px 0;
}

.cshp-contact .cshp-img-cover {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--cshp-surface-2);
}

/* Buttons */
.cshp-contact .cshp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  background: var(--cshp-accent-deep); color: #f3ecdf;
  font-family: var(--cshp-sans);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--cshp-accent-deep); border-radius: 0;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.cshp-contact .cshp-btn:hover { background: var(--cshp-accent); border-color: var(--cshp-accent); }

/* Section block */
.cshp-contact .cshp-block {
  padding: 120px 0;
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-contact .cshp-section__head { margin-bottom: 64px; }
.cshp-contact .cshp-section__head .cshp-display { margin-top: 4px; }

/* Override Merchant content constraints */
.cshp-contact-page .site-breadcrumb { display: none !important; }
.cshp-contact-page .site-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}
.cshp-contact-page .site-content > .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}
.cshp-contact-page #primary {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}
.cshp-contact-page #secondary { display: none !important; }
.cshp-contact-page .entry-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.cshp-contact-page .page-header { display: none; }
.cshp-contact-page #content { padding: 0; }

/* ========================================
   1. HERO
   ======================================== */
.cshp-contact-hero {
  padding: 120px 0;
  background: var(--cshp-bg);
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-contact-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}
.cshp-contact-hero .cshp-display { max-width: 640px; }
.cshp-contact-hero__tagline {
  max-width: 560px;
  margin: 28px 0 36px;
}
.cshp-contact-hero__tagline a {
  color: var(--cshp-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cshp-contact-hero__tagline a:hover { color: var(--cshp-accent); }

.cshp-contact-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.cshp-contact-hero__visual::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,22,18,0) 60%, rgba(26,22,18,0.08) 100%);
}

/* ========================================
   2. LOCATIONS
   ======================================== */
.cshp-contact-locs { background: var(--cshp-surface); }

/* auto-fit, а не фиксированное число колонок: филиалов стало три, и
   четвёртый не должен потребовать новой правки CSS. 340px + gap 40
   даёт 3 колонки в контейнере 1320px и сам схлопывается на узких. */
.cshp-contact-locs__grid {
  display: grid;
  /* min(340px, 100%) вместо голых 340px: жёсткий минимум держал колонку
     в 340px даже когда контейнер уже, и карточка вылезала за правый край —
     горизонтальный скролл на экранах ýже 372px. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 40px;
}

.cshp-contact-loc {
  border: 1px solid var(--cshp-line);
  padding: 40px;
}
.cshp-contact-loc__tag {
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cshp-accent-text);
  display: block; margin-bottom: 12px;
}
.cshp-contact-loc__name {
  font-family: var(--cshp-serif);
  font-size: 24px; font-weight: 400;
  color: var(--cshp-ink);
  margin: 0 0 24px;
}
.cshp-contact-loc__list {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 16px;
  margin: 0 0 28px;
}
.cshp-contact-loc__list dt {
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cshp-ink-3);
  padding-top: 2px;
}
.cshp-contact-loc__list dd {
  margin: 0;
  font-size: 15px; color: var(--cshp-ink);
}
.cshp-contact-loc__list a:hover { color: var(--cshp-accent); }
/* Карта-iframe из карточек убрана, см. комментарий в contact.php. */

/* ========================================
   3. INFO
   ======================================== */
.cshp-contact-info { background: var(--cshp-bg-2); border-bottom: 0; }
/* Тот же приём, что в «Nuestra historia» на странице «О нас»: метка отдельной
   колонкой слева, мера строки в знаках, а не в пикселях. При 760px и кегле 16
   в строке было 85 знаков — глазу тяжело возвращаться на начало следующей. */
.cshp-contact-info .cshp-container {
  display: grid;
  grid-template-columns: minmax(140px, 240px) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: start;
}
.cshp-contact-info .cshp-eyebrow {
  position: sticky; top: 140px;
  margin: 0; padding-top: 4px;
}
.cshp-contact-info__body {
  max-width: 68ch;
  display: flex; flex-direction: column;
  gap: 1.75em;
}
.cshp-contact-info__body p {
  font-size: 16px; line-height: 1.75;
  color: var(--cshp-ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1100px) {
  .cshp-contact-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .cshp-contact-info .cshp-container { grid-template-columns: 1fr; gap: 18px; }
  .cshp-contact-info .cshp-eyebrow { position: static; }
  .cshp-contact-hero .cshp-display,
  .cshp-contact-hero__tagline { max-width: none; }
  .cshp-contact-hero__visual { aspect-ratio: 16 / 9; order: -1; }
}

@media (max-width: 640px) {
  .cshp-contact-hero { padding: 100px 0 64px; }
  .cshp-contact .cshp-block { padding: 72px 0; }
  .cshp-contact-loc { padding: 28px; }
}