/* The home page: the day as a timeline of the app, then short teasers for the pages about cost,
   privacy and help. Shared parts (.window, .points, .more, .bill, .facts) come from styles.css. */

/* ── The sundial without JavaScript ─────────────── */
/* Only the script fills the dial, the next prayer, the times and the city list, so without it the card
   keeps just its heading and the note (the js class is set in <head>). */
html:not(.js) .sundial .dial, html:not(.js) .sundial .next, html:not(.js) .sundial .times, html:not(.js) .sundial .foot { display: none; }
.sundial .nojs { margin: 14px 6px 4px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 30em; }

/* ── Your day, from Fajr to Isha ─────────────────── */
.day-index .section-head { margin-bottom: 64px; }

/* Entries down the left, a few app screens beside them on wide screens */
.hours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr); column-gap: clamp(40px, 6vw, 96px); }
.hours > .window { grid-column: 2; align-self: center; }
.hours > .window .device { width: min(100%, 300px); }
.hours > .w1 { grid-row: 1 / span 2; }
.hours > .w2 { grid-row: 3 / span 2; }
.hours > .w3 { grid-row: 5 / span 3; }

/* One hour: its name, a dot on the rail, and what that part of the app does */
.hour { grid-column: 1; display: grid; grid-template-columns: 104px 18px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 22px; }
.hour .at { grid-column: 1; grid-row: 1; margin: 0; padding-top: 13px; text-align: right; font-family: var(--display); font-size: 12.5px; letter-spacing: 0.2em; line-height: 1.35; text-transform: uppercase; color: var(--ink); }
.hour .rail { grid-column: 2; grid-row: 1 / span 2; position: relative; }
.hour .rail::before { content: ''; position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 24%, transparent); }
/* The line runs on to the next hour, shading from this hour's colour into the next one's */
.hour .rail::after { content: ''; position: absolute; top: 38px; bottom: 10px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(var(--c), var(--n, var(--c))); }
/* After Isha the day is done: Zakat hangs off it on a dotted line, outside the hours */
.hour.after .rail::after { width: 0; margin-left: -1px; background: none; border-left: 2px dotted var(--gold); }
.hour.last .rail::after { display: none; }
.hour .body { grid-column: 3; grid-row: 1 / span 2; padding-bottom: 56px; }
.hour.last .body { padding-bottom: 8px; }
.hour h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.hour .body > p { margin-top: 12px; color: var(--muted); max-width: 34em; }
.hour .body > p strong { color: var(--ink); font-weight: 500; }
.hour .points { margin-top: 16px; gap: 9px; max-width: 38em; }
.hour .points li { font-size: 15.5px; line-height: 1.55; }
.hour .points li::before { margin-top: 7px; }
.go { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-weight: 500; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1.5px solid var(--gold); }
.go::after { content: ''; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.go:hover { color: var(--brand); }
.go:hover::after { transform: translateX(3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .go:hover::after { transform: rotate(45deg); } }

@media (max-width: 920px) {
  .day-index .section-head { margin-bottom: 44px; }
  .hours { grid-template-columns: minmax(0, 1fr); }
  .hours > .window, .hours > .w1, .hours > .w2, .hours > .w3 { grid-column: 1; grid-row: auto; margin: 0 0 56px; }
  .hours > .window .device { width: min(100%, 230px); }
  .hour { grid-template-columns: 18px minmax(0, 1fr); column-gap: 16px; }
  .hour .at { grid-column: 2; grid-row: 1; text-align: left; padding-top: 10px; }
  .hour .rail { grid-column: 1; }
  .hour .rail::before { top: 9px; }
  .hour .rail::after { top: 34px; }
  .hour .body { grid-column: 2; grid-row: 2; padding-bottom: 48px; }
  .hour h3 { margin-top: 6px; }
}

/* More inside: the smaller things, each pointing to the page that covers it */
.more-inside { margin-top: 88px; }
.more-inside h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; margin-top: 12px; }
ul.more { list-style: none; padding: 0; margin: 24px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.more li { display: flex; flex-direction: column; padding: 22px 22px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
ul.more li .go { align-self: flex-start; margin-top: auto; padding-top: 14px; font-size: 14.5px; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
ul.more li .go::after { width: 6px; height: 6px; }
ul.more li > span { margin-bottom: 4px; }
@media (max-width: 920px) { ul.more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { ul.more { grid-template-columns: minmax(0, 1fr); } }

/* ── What it costs, and privacy, side by side ─────── */
.pair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.pair h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; margin-top: 14px; }
.pair .intro { margin-top: 16px; font-size: 17.5px; color: var(--muted); max-width: 30em; }
.pair .bill { margin-top: 34px; }
.bill ul.lines { list-style: none; margin: 0; padding: 0; }
.pair .facts { margin-top: 34px; }
.pair .facts li { grid-template-columns: 128px minmax(0, 1fr); }
.pair .go { margin-top: 36px; }
@media (max-width: 920px) { .pair { grid-template-columns: minmax(0, 1fr); gap: 88px; } .pair > section { max-width: 680px; } }
@media (max-width: 560px) { .pair .facts li { grid-template-columns: minmax(0, 1fr); } }

/* ── Questions ────────────────────────────────────── */
.closing { padding: 0 0 104px; }
.closing .inner { border-top: 1px solid var(--line); padding-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.closing h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin-top: 12px; }
.closing p { margin-top: 12px; color: var(--muted); max-width: 38em; }
.closing .links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .closing .inner { grid-template-columns: minmax(0, 1fr); } }

/* ── What people are tired of ─────────────────────── */
.pains .section-head { margin-bottom: 40px; }
.pain-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pain-grid li { background: var(--sheet); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 22px; display: grid; gap: 14px; align-content: start; }
.pain-grid h3 { margin: 0; font-size: 20px; line-height: 1.25; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; }
.pain-grid p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.pain-grid .label { display: block; margin-bottom: 6px; color: var(--brand); }
.pains-more { margin: 28px 0 0; font-weight: 600; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pain-grid { grid-template-columns: minmax(0, 1fr); } }