/* ==========================================================================
   CONTACT PAGE

   The old page printed the address, phone and full hours twice - once as prose
   and again in the homepage's [ck_location] block, itself a large beige card -
   with the footer making three. Here each fact appears once.

   Composition is its own: the phone number set at display size as the page's
   focal point, then the map running the full width unframed, then address and
   hours on hairlines. Third distinct layout in the set - the menu page opens on
   a centred dark hero, the About page on a type/photograph split - sharing the
   type system and palette rather than a template.
   ========================================================================== */

.ck-contactpage {
  --ck-hair: rgba(36, 32, 29, .085);
  --ck-hair-mid: rgba(36, 32, 29, .16);
}

/* this page brings its own masthead, so the generic page header is hidden */
body.ck-has-contact .ck-pagehead { display: none; }

/* `.ck-page h1,h2,h3,h4` in ck-site.css is (0,1,1) and outranks a lone class,
   forcing weight 600 over the lighter display weight this page sets */
.ck-contactpage .ck-cmast__title,
.ck-contactpage .ck-corder__title { font-weight: 500; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.ck-cmast { padding-block: clamp(52px, 7vw, 108px) clamp(40px, 5vw, 68px); }
.ck-cmast__title {
  font-family: var(--ck-serif);
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: .98; letter-spacing: -.025em;
  color: var(--ck-charcoal); margin-top: 20px;
}
.ck-cmast__lede {
  margin-top: 22px; max-width: 46ch;
  font-family: var(--ck-serif);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55; font-style: italic;
  color: var(--ck-text-muted);
  text-wrap: pretty;
}

/* the number is the page: set it big, and make the whole line the target */
.ck-cmast__phone {
  display: inline-flex; align-items: baseline; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ck-hair-mid);
  font-family: var(--ck-serif);
  font-size: clamp(38px, 5.6vw, 78px);
  line-height: 1; letter-spacing: -.02em;
  color: var(--ck-charcoal);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ck-ease), border-color .2s var(--ck-ease);
}
.ck-cmast__phone:hover { color: var(--ck-red); border-color: var(--ck-red); }
.ck-cmast__phonelabel {
  font-family: var(--ck-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ck-gold-muted);
}

/* ==========================================================================
   Map — full width, no frame, no panel behind it
   ========================================================================== */

.ck-cmap {
  /* break out of the theme's content wrapper so the map runs edge to edge.
     body already carries overflow-x: hidden, so 100vw cannot open a
     horizontal scrollbar of its own. */
  width: 100vw; max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(280px, 34vw, 460px);
  background: var(--ck-cream);
}
.ck-cmap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Address and hours
   ========================================================================== */

.ck-contactpage__body { padding-block: clamp(56px, 7vw, 96px); }

.ck-cgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 6vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.ck-clabel {
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ck-text-muted);
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-caddr {
  font-family: var(--ck-serif); font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.5; color: var(--ck-charcoal); margin-bottom: 18px;
}

.ck-chours { width: 100%; border-collapse: collapse; }
.ck-chours th, .ck-chours td {
  text-align: left; padding: 12px 0; vertical-align: baseline;
  border-bottom: 1px solid var(--ck-hair); font-weight: 400;
}
.ck-chours th {
  font-family: var(--ck-serif); font-size: 19px; color: var(--ck-charcoal);
}
.ck-chours td {
  font-family: var(--ck-sans); font-size: 14px; color: var(--ck-text-muted);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ck-chours tr.is-closed td { color: var(--ck-red); }
.ck-chours tr:last-child th, .ck-chours tr:last-child td { border-bottom: 0; }

.ck-clink {
  display: inline-block;
  font-family: var(--ck-sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--ck-red);
  border-bottom: 1px solid rgba(181, 31, 36, .32); padding-bottom: 2px;
  transition: border-color .18s var(--ck-ease);
}
.ck-clink::after { content: "\2009\2192"; }
.ck-clink:hover { color: var(--ck-red-dark); border-color: currentColor; }

/* ==========================================================================
   Ordering
   ========================================================================== */

.ck-corder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(36px, 5vw, 80px); align-items: center;
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--ck-hair-mid);
}
.ck-corder__title {
  font-family: var(--ck-serif);
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02;
  letter-spacing: -.022em; color: var(--ck-charcoal);
  margin-bottom: 20px;
}
.ck-corder__text {
  font-size: 17px; line-height: 1.78; color: var(--ck-text);
  max-width: 52ch; margin-bottom: 30px;
}
.ck-corder__actions { display: flex; flex-wrap: wrap; gap: 13px; }
/* The ratio sits on the image, not the figure. With `aspect-ratio` on the
   wrapper and `height: 100%` on the image, the percentage height resolves
   against a container whose own height depends on its width - and the image
   collapsed to nothing on the live page while rendering fine in isolation. */
.ck-corder__media {
  margin: 0; border-radius: var(--ck-radius); overflow: hidden;
}
.ck-corder__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1400 / 1100; object-fit: cover;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  .ck-corder { grid-template-columns: minmax(0, 1fr); }
  .ck-corder__media { order: -1; }
  .ck-corder__media img { aspect-ratio: 16 / 10; }
}

@media (max-width: 680px) {
  .ck-cgrid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* the number would otherwise set the page's minimum width */
  .ck-cmast__phone {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    font-size: clamp(32px, 11vw, 46px);
  }
  .ck-corder__actions .ck-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-cmast__phone, .ck-clink { transition: none; }
}