/* ============================================================
   Shemroon Kitchen — contact page
   Live status light, gold London clock, day-by-day hours,
   exact Google map, collection steps.
   ============================================================ */

.ct { max-width: 1180px; margin: 0 auto; padding: clamp(7.5rem, 13vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem); }

.ct__head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.ct__head .display { margin: 1rem 0 .6rem; }
.ct__lead { font: italic 700 clamp(1.25rem, 2.2vw, 1.7rem) var(--font-script); color: var(--paper); text-shadow: 0 2px 10px rgba(20, 24, 14, .5); margin-bottom: 1.4rem; }

/* ------------------------------------------------------------ layout */

.ct__grid {
  display: grid; gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "hours find" "hours map";
  animation: rise .8s .08s cubic-bezier(.2, .7, .2, 1) both;
}
.ct-hours { grid-area: hours; }
.ct-find { grid-area: find; }
.ct-map { grid-area: map; }

.ct-card {
  position: relative; background: #f7f1e3; border-radius: 28px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 26px 64px rgba(12, 12, 12, .24);
}
.ct-card--dark {
  background: radial-gradient(120% 140% at 0% 0%, #2d3126 0%, #1b1d15 70%);
  color: #f4efe2; border: 1px solid rgba(231, 199, 122, .22);
}
.ct-card--dark .eyebrow { color: #e7c77a; }
.ct-card__title { font: 700 clamp(2rem, 3.4vw, 2.7rem)/1 var(--font-script); color: var(--ink); margin: .5rem 0 1.2rem; }
.ct-card--dark .ct-card__title { color: #f6e7c4; }

/* ------------------------------------------------------ opening hours */

.ct-hours { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; }
/* clock sits level with the heading (centring it against the tall day list pushed it low) */
.ct-hours__clock { display: grid; place-items: center; padding-top: .6rem; position: sticky; top: 7rem; }

.lux-clock { width: clamp(150px, 17vw, 210px); height: auto; filter: drop-shadow(0 18px 26px rgba(20, 22, 15, .35)); overflow: visible; }
.lux-clock__rim { fill: none; stroke: url(#ctGold); stroke-width: 8; }
.lux-clock__face { fill: url(#ctFace); stroke: rgba(231, 199, 122, .35); stroke-width: 1; }
.lux-clock__ticks line { stroke: rgba(231, 199, 122, .55); stroke-width: 2; stroke-linecap: round; }
.lux-clock__ticks line.major { stroke: #e7c77a; stroke-width: 3.2; }
.lux-clock__label { fill: rgba(231, 199, 122, .7); font: 600 9px var(--font-display); letter-spacing: 3px; stroke: none; }
.lux-clock__hour { stroke: #f6e7c4; stroke-width: 6; stroke-linecap: round; }
.lux-clock__minute { stroke: #e7c77a; stroke-width: 4; stroke-linecap: round; }
.lux-clock__second { stroke: #d9534f; stroke-width: 1.6; stroke-linecap: round; transition: none; }
.lux-clock__pin { fill: #e7c77a; stroke: #1b1d15; stroke-width: 2; }

.week { display: grid; gap: .1rem; margin: 0 0 1rem; }
.week li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .62rem .75rem; border-radius: 12px;
  border-bottom: 1px solid rgba(48, 51, 40, .1);
  font-size: 1rem; color: var(--ink);
}
.week__day { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.week__time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.week li.is-today {
  background: linear-gradient(90deg, rgba(231, 199, 122, .42), rgba(231, 199, 122, .08));
  border-bottom-color: transparent; font-weight: 600;
  box-shadow: inset 3px 0 0 #b8893a;
}
.week__tag {
  font: 700 .6rem var(--font-display); font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  background: #1f221a; color: #e7c77a; padding: .22rem .55rem; border-radius: 999px;
}
.ct-hours__note { color: var(--muted); font-size: .95rem; padding-left: .75rem; }

/* --------------------------------------------------------- find us */

.ct-find__address { font-style: normal; line-height: 1.75; color: rgba(244, 239, 226, .85); margin-bottom: 1.6rem; }
.ct-find__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.ct-link { color: #e7c77a; font: 600 .82rem var(--font-display); letter-spacing: .06em; border-bottom: 1px solid rgba(231, 199, 122, .4); padding-bottom: 2px; }
.ct-link:hover { border-color: #e7c77a; }

.ct-map { border-radius: 28px; overflow: hidden; min-height: 300px; background: #d9d3c2; box-shadow: 0 26px 64px rgba(12, 12, 12, .24); }
.ct-map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

/* ------------------------------------------------------- how to collect */

.ct-steps { margin-top: clamp(2.5rem, 6vh, 4rem); text-align: center; }
.ct-steps__title { font: 700 clamp(2.2rem, 4.5vw, 3.4rem)/1 var(--font-script); color: #f6e7c4; margin: .6rem 0 1.8rem; text-shadow: 0 3px 16px rgba(20, 24, 14, .45); }
.ct-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); text-align: left; }
.ct-steps li {
  position: relative; background: rgba(247, 241, 227, .96); border-radius: 24px;
  padding: 2.4rem 1.6rem 1.6rem; box-shadow: 0 18px 44px rgba(12, 12, 12, .2);
}
.ct-steps li span {
  position: absolute; top: -1.2rem; left: 1.4rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 1.3rem var(--font-script);
  background: linear-gradient(180deg, #fff4d2, #e7c77a 55%, #b8893a); color: #1f221a;
  box-shadow: 0 8px 18px rgba(20, 22, 15, .3);
}
.ct-steps h3 { font: 700 1.45rem var(--font-script); color: var(--ink); margin-bottom: .4rem; }
.ct-steps p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* --------------------------------------------------------- call + insta */

.ct-touch { margin-top: clamp(1.4rem, 3vh, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.6rem); }
.ct-touch__card {
  display: grid; gap: .25rem; align-content: start;
  background: radial-gradient(120% 140% at 0% 0%, #2d3126 0%, #1b1d15 70%);
  color: #f4efe2; border: 1px solid rgba(231, 199, 122, .22); border-radius: 24px;
  padding: 1.6rem 1.8rem; box-shadow: 0 18px 44px rgba(12, 12, 12, .24);
  transition: transform .25s ease, border-color .25s ease;
}
.ct-touch__card:hover { transform: translateY(-3px); border-color: rgba(231, 199, 122, .55); }
.ct-touch__card svg { width: 26px; height: 26px; stroke: #e7c77a; margin-bottom: .6rem; }
.ct-touch__label { font: 600 .72rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #e7c77a; }
.ct-touch__card strong { font: 700 clamp(1.6rem, 3vw, 2rem) var(--font-script); color: #f6e7c4; letter-spacing: .02em; }
.ct-touch__hint { font-size: .88rem; color: rgba(244, 239, 226, .7); }

/* ------------------------------------------------------------ phones */

@media (max-width: 900px) {
  .ct__grid { grid-template-columns: 1fr; grid-template-areas: "hours" "find" "map"; }
  .ct-steps ol { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 600px) {
  .ct-hours { grid-template-columns: 1fr; justify-items: stretch; }
  .ct-hours__clock { margin-bottom: -.2rem; padding-top: 0; position: static; }
  .lux-clock { width: 150px; }
  .ct-touch { grid-template-columns: 1fr; }
  .week li { padding: .58rem .6rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ct__head, .ct__grid { animation: none !important; }
}