/* Country and town pages, and the town directory on the home page. Builds on styles.css. */

.place-hero { position: relative; height: 76vh; height: 76svh; min-height: 520px; max-height: 860px; overflow: hidden; }
.place-hero .hero-scrim { height: 78%; }
.place-copy {
  position: absolute; left: var(--gutter); bottom: clamp(40px, 7vh, 72px); z-index: 2;
  max-width: min(700px, calc(100% - 2 * var(--gutter)));
}
.place-page h1 { font-size: clamp(32px, 4.4vw, 60px); }

.crumbs { display: flex; gap: 10px; margin: 0 0 16px; font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--paper); }
.crumbs span { color: var(--faint); }

.verdict {
  display: flex; gap: 14px; align-items: baseline; margin: 22px 0 0;
  font: 500 clamp(18px, 1.6vw, 22px)/1.38 var(--sans); letter-spacing: -0.01em; color: var(--paper); text-wrap: pretty;
}
.verdict .glyph { flex: none; width: 15px; height: 15px; border-radius: 50%; transform: translateY(1px); }
/* a cut: the site's black hole with a red rim */
.verdict.is-out .glyph { background: #020203; border: 2.5px solid var(--cut); box-shadow: 0 0 0 5px rgba(255, 90, 60, 0.14); }
/* lights on */
.verdict.is-clear .glyph { background: var(--lights); box-shadow: 0 0 14px 2px rgba(243, 194, 107, 0.55); }
/* lights on, as far as we can see */
.verdict.is-partial .glyph { background: rgba(243, 194, 107, 0.5); box-shadow: 0 0 0 4px rgba(243, 194, 107, 0.12); }
/* no data reaches this place */
.verdict.is-dark .glyph { border: 1.5px dashed var(--dim); }
.verdict.is-dark { color: var(--paper-2); font-size: clamp(16px, 1.35vw, 19px); }

.note { margin: 12px 0 0 29px; max-width: 58ch; color: var(--dim); font-size: 14px; text-wrap: pretty; }
.stamp { margin: 16px 0 0 29px; color: var(--faint); font-size: 12.5px; }

/* outages near the town */
.outs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.out { display: grid; grid-template-columns: 64px 1fr auto; gap: 2px 16px; align-items: baseline; padding: 15px 0 14px; border-bottom: 1px solid var(--rule); }
.out-d { grid-row: span 2; font: 300 15px/1.3 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.out-place { font: 600 18px/1.25 var(--sans); letter-spacing: -0.012em; }
.out-place::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: 1px; }
.out.unplanned .out-place::before { background: #020203; border: 2px solid var(--cut); }
.out.planned .out-place::before { border: 1.2px solid var(--planned); }
.out-op { color: var(--faint); font-size: 12.5px; text-align: right; }
.out-meta { grid-column: 2 / -1; color: var(--dim); font-size: 13px; }

/* operators */
.ops { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.ops li { break-inside: avoid; padding: 0 0 14px; }
.ops a { font: 600 17px/1.3 var(--sans); }
.ops span { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }

/* questions */
.faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq details:first-child { border-top: 1px solid var(--rule-strong); }
.faq summary { cursor: pointer; list-style: none; font: 600 17px/1.35 var(--sans); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; color: var(--dim); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 10px 0 0; color: var(--dim); font-size: 15px; max-width: 62ch; }
.faq .rel { margin: 26px 0 0; color: var(--paper-2); font-size: 15px; max-width: 62ch; }

/* towns */
.towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.towns a { font-size: 16px; }
.towns.all { display: block; columns: 4 170px; column-gap: 28px; }
.towns.all li { break-inside: avoid; padding: 0 0 7px; font-size: 15px; }
.towns .hit a { font-weight: 600; text-decoration-color: var(--cut); }
.towns .n, .dir-name .n {
  display: inline-block; margin-left: 7px; min-width: 18px; padding: 1px 5px; border-radius: 9px; text-align: center;
  font: 700 11px/1.3 var(--sans); color: var(--night); background: var(--cut); vertical-align: 2px;
}
.more { margin: 22px 0 0; color: var(--faint); font-size: 13.5px; }

/* the home page directory */
.directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; }
.dir-country { border-top: 1px solid var(--rule); padding-top: 12px; }
.dir-name { font: 600 18px/1.25 var(--sans); letter-spacing: -0.01em; text-decoration: none; }
.dir-name:hover { text-decoration: underline; text-decoration-color: var(--cut); text-underline-offset: 4px; }
.dir-term { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; }
.dir-country p { margin: 8px 0 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .directory { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .place-hero { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .place-hero .map { position: relative; height: 46svh; inset: auto; order: 2; }
  .place-hero .hero-scrim { display: none; }
  .place-copy { position: relative; left: auto; bottom: auto; max-width: none; padding: 86px var(--gutter) 22px; order: 1; }
  .note, .stamp { margin-left: 0; }
  .out { grid-template-columns: 46px 1fr; }
  .out-op { grid-column: 2; text-align: left; }
  .ops { columns: 1; }
  .towns.all { columns: 2; }
  .directory { grid-template-columns: 1fr; }
}

.ops-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 29px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 640px) { .ops-inline { margin-left: 0; } }

/* "Get an alert when the power goes in …" */
.alert-cta {
  display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0 29px; padding: 9px 15px 9px 13px;
  border: 1px solid var(--rule-strong); border-radius: 3px; text-decoration: none;
  font: 600 14px/1.2 var(--sans); color: var(--paper); background: rgba(5, 7, 12, 0.5);
}
.alert-cta::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--lights); box-shadow: 0 0 10px rgba(243, 194, 107, 0.7); }
.alert-cta:hover { border-color: var(--lights); }
@media (max-width: 640px) { .alert-cta { margin-left: 0; } }