/* A city page: the Shabbat times of one city. Built on page.css (the holiday pages), so the card, the
   cards below it, the menu and the footer are the same; only what a city page adds lives here. */

/* the navy card rises into place by movement only: fading it greyed the card once, never again */
.c-rise{animation:c-rise .55s var(--ease) both}
@keyframes c-rise{from{translate:0 18px}to{translate:0 0}}
html.from-site .c-rise{animation:none}
/* below the fold a card arrives when the reader reaches it, by movement only */
.c-seen{translate:0 22px;transition:translate .6s var(--ease)}
.c-seen.in{translate:0 0}

/* the card: the name of the Shabbat on one side, the tools on the other, the times across the bottom.
   The lead time is the largest thing on the page, with the countdown right under it */
.a-hero.c-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head tools" "times times" "note note";column-gap:24px}
.a-hero .c-head{grid-area:head}
.a-hero .c-name{margin-top:14px;font-family:var(--f-display);font-weight:900;font-size:clamp(24px,2.8vw,32px);line-height:1.15;color:#fff}
.a-hero .c-date{color:var(--yareach-soft);margin-top:6px;font-size:18px}
.a-hero .a-times{grid-area:times;grid-template-columns:minmax(0,1.8fr) repeat(2,minmax(0,1fr));align-items:stretch;margin-top:26px}
.a-hero .a-time{display:flex;flex-direction:column;justify-content:flex-end}
.a-hero .a-time.lead{background:rgba(238,240,247,.12);border-color:rgba(232,163,61,.45)}
.a-hero .a-time.lead .v{font-size:clamp(52px,5vw,72px);line-height:1;margin-top:6px}
.a-hero .a-time.past .v{color:var(--yareach-soft)}
.a-hero .c-cnt{align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;margin-top:12px;padding:0 14px;border-radius:999px;background:rgba(232,163,61,.18);
  border:1px solid rgba(232,163,61,.55);color:var(--ner-soft);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.a-hero .c-note{grid-area:note;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px}
.a-hero .c-note span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:12px;background:rgba(238,240,247,.1);color:var(--yareach);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.a-hero .c-tools{grid-area:tools;align-self:start;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px 12px}
.a-hero .c-tools .a-city,.a-hero .c-tools .a-share{margin-top:0}

/* on a wide screen the weeks and the day sit side by side, then the candles and the neighbours */
@media (min-width:1100px){
  .c-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:stretch}
  .c-grid > .a-card{margin-top:16px;display:flex;flex-direction:column}
  .c-grid > .a-card > .c-foot:last-child{margin-top:auto;padding-top:14px}
}
/* beside the lead time, the other two stack, so the card holds no empty navy above them */
@media (min-width:761px){
  .a-hero .a-times{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
  .a-hero .a-time.lead{grid-row:1/3}
  .a-hero .a-time:not(.lead){justify-content:center}
}

/* the coming weeks: four columns that fit a phone, the week we are in lit like a candle */
.c-weeks{width:100%;margin-top:14px;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.c-weeks th{font-size:15px;font-weight:700;color:var(--dyo-rach);text-align:start;padding:0 12px 8px}
.c-weeks td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
.c-weeks td.t{font-family:var(--f-util);font-weight:700;font-size:20px;white-space:nowrap}
.c-weeks .nm{display:block;font-weight:700;font-size:18px;line-height:1.25}
.c-weeks .dt{display:block;color:var(--dyo-rach);font-size:15px;margin-top:2px}
.c-weeks .tag{display:inline-flex;white-space:nowrap;align-items:center;min-height:24px;padding:0 10px;margin-top:6px;border-radius:999px;font-size:14px;font-weight:700}
.c-weeks .tag.here{background:var(--ner);color:var(--dyo)}
.c-weeks .tag.clock{background:var(--erev-day);color:#fff}
.c-weeks .th-s{display:none}
.c-weeks tr.now td{background:#FDF3E1;border-top-color:transparent}
.c-weeks tr.now + tr td{border-top-color:transparent}
.c-weeks tr.now td:first-child{border-start-start-radius:14px;border-end-start-radius:14px}
.c-weeks tr.now td:last-child{border-start-end-radius:14px;border-end-end-radius:14px}

/* today in the city as one line, from dawn to nightfall, with where we are now */
.c-day{margin-top:26px}
.c-track{position:relative;height:16px;border-radius:999px;background:rgba(46,74,156,.1);margin:48px 12px 0}
.c-seg{position:absolute;inset-block:0}
.c-seg.dawn{background:rgba(46,74,156,.35);border-start-start-radius:999px;border-end-start-radius:999px}
.c-seg.sun{background:var(--erev-day)}
.c-seg.dusk{background:var(--erev-dusk);border-start-end-radius:999px;border-end-end-radius:999px}
.c-now{position:absolute;top:50%;inset-inline-start:0;width:0;height:0}
.c-now i{position:absolute;top:-13px;left:-13px;width:26px;height:26px;border-radius:50%;background:var(--card);border:6px solid var(--ner);
  box-shadow:0 4px 10px -4px rgba(23,27,48,.5)}
.c-now b{position:absolute;bottom:20px;left:50%;translate:-50% 0;white-space:nowrap;font-family:var(--f-util);font-weight:700;font-size:15px;color:var(--erev)}
.c-now.at-s b{left:auto;right:-12px;translate:0 0}
.c-now.at-e b{left:-12px;translate:0 0}
.c-past{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(238,240,247,.72);border-start-start-radius:999px;border-end-start-radius:999px}
.c-marks{position:relative;height:22px;margin:8px 12px 0}
.c-mk{position:absolute;top:0;translate:50% 0;white-space:nowrap;font-size:14px;color:var(--dyo-rach);font-variant-numeric:tabular-nums}
.c-mk.at-s{translate:0 0}
.c-mk.at-e{translate:100% 0}

/* the five times of the day as a timetable: what has passed is quiet, the next one is marked */
.c-zm{margin-top:18px;display:grid}
.c-z{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 4px;border-top:1px solid var(--line)}
.c-z:first-child{border-top:0}
.c-z .l{color:var(--dyo);font-size:18px;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.c-z .l em{font-style:normal;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--ner);color:var(--dyo);font-size:14px;font-weight:700}
.c-z .v{font-family:var(--f-util);font-variant-numeric:tabular-nums;font-weight:700;font-size:22px;color:var(--erev)}
.c-z.past .l,.c-z.past .v{color:var(--dyo-rach);font-weight:500}
.c-foot{margin-top:14px;color:var(--dyo-rach);font-size:16px;max-width:70ch}

.c-gap{font-family:var(--f-util);font-weight:700;color:var(--erev);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .a-hero.c-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "times" "note" "tools"}
  .a-hero .c-tools{justify-content:flex-start;margin-top:16px}
  .a-hero .a-times{grid-template-columns:1fr 1fr;margin-top:20px}
  .a-hero .a-time.lead{grid-column:1/-1}
  .c-weeks .th-l{display:none}
  .c-weeks .tag{white-space:normal;line-height:1.3;padding-block:3px}
  .c-weeks .th-s{display:inline}
  .c-weeks th,.c-weeks td{padding-inline:8px}
  .c-weeks td.t{font-size:18px}
  .c-weeks .nm{font-size:16px}
}
/* the smallest phones: the four columns still fit, a long portion name breaks at its hyphen */
@media (max-width:400px){
  .c-weeks th,.c-weeks td{padding-inline:5px}
  .c-weeks td.t{font-size:16px}
  .c-weeks .nm{font-size:15px;overflow-wrap:anywhere}
  .c-weeks td:first-child{width:34%}
}
@media (prefers-reduced-motion:reduce){.c-rise{animation:none}.c-seen{translate:0 0}}
html.a11y-still .c-rise{animation:none}
html.a11y-still .c-seen{translate:0 0}