/* ==========================================================================
   Home (Direction A, Swiss Editorial). Adapted from
   docs/redesign/directions/a-swiss-editorial/styles.css.
   Also holds the line map and the emirates list (locations/_port_map),
   which locations/index renders too.
   ========================================================================== */

/* ---------- Hero: statement, sentence search, popular ------------------- */
.hero { padding-block: clamp(48px, 6.5vw, 96px) clamp(40px, 4vw, 64px); }
.hero__kicker { grid-column: 1 / -1; margin-block-end: var(--s-4); font-size: 0.8125rem; font-weight: 500; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); }
.statement {
  grid-column: 1 / span 10;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

/* The sentence search, set in a raised panel: "I need ___ in ___ [Search]" */
.ask {
  grid-column: 1 / -1;
  margin-block-start: clamp(32px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; row-gap: var(--s-4);
  padding: 20px 20px 20px 28px;
  border-radius: var(--radius-lg); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow);
  font-size: 1.5rem; line-height: 1.2; font-weight: 500; letter-spacing: var(--track-head);
}
.ask__word { color: var(--grey); padding-bottom: 10px; }
.ask__field { position: relative; display: flex; flex-direction: column; }
.ask__field--what { flex: 1 1 300px; }
.ask__field--where { flex: 0 1 320px; }
.ask__field input, .ask__field select {
  width: 100%; min-height: 52px;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; padding: 0 0 8px; outline: none;
  color: var(--ink); font: inherit; font-weight: 500; letter-spacing: var(--track-head);
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.ask__field input:hover, .ask__field select:hover { border-color: var(--grey); }
.ask__field input::placeholder { color: var(--grey); opacity: 1; }
.ask__field input::-webkit-search-cancel-button { display: none; }
.ask__field select {
  padding-right: 32px; cursor: pointer; text-overflow: ellipsis;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px top 45% / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 top 45% / 7px 7px no-repeat;
}
.ask__field select option, .ask__field select optgroup { font-size: var(--t-body); color: var(--ink); background: var(--paper); }
/* The fields draw their own focus: the rule turns ink and thickens to 2px instead of the outline ring. */
.ask__field input:focus-visible, .ask__field select:focus-visible { outline: none; }
.ask__field input:focus, .ask__field select:focus { border-bottom: 2px solid var(--ink); padding-bottom: 7px; }
.ask__submit { min-height: 56px; padding-inline: 28px; font-size: var(--t-body); margin-inline-start: var(--s-3); }
/* The type-ahead listbox sits under the field but reads at body size. */
.ask .suggest__list { font-size: var(--t-body); font-weight: 400; letter-spacing: var(--track-body); line-height: var(--lh-body); }

.popular { grid-column: 1 / -1; margin-block-start: var(--s-5); color: var(--grey-text); }
.popular a { color: var(--ink); }

@media (max-width: 63.99rem) { .statement { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) {
  .ask { grid-column: 1 / -1; padding: 20px; font-size: 1.25rem; row-gap: 0; }
  .ask__word { padding: 0; margin-block-start: var(--s-4); }
  .ask__word:first-child { margin-block-start: 0; }
  .ask__field--what, .ask__field--where { flex: 1 1 100%; }
  .ask__submit { margin: var(--s-5) 0 0; width: 100%; }
}

/* ---------- At a glance: four stat tiles ------------------------------- */
.home-glance { margin-block: var(--s-7) var(--s-8); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.stats dt { color: var(--grey-text); }
.stats dd { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
}

/* Section heading row above a list (sectors, ports, recent, journal) */
.section-head { margin-block-end: var(--s-6); }

/* ---------- Ports: line map (cols 1–8) + emirates list (9–12) ----------- */
.ports { grid-column: 1 / span 8; padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface); }
.map { width: 100%; }
.map svg { display: block; width: 100%; height: auto; overflow: hidden; }
.map__coast { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map__graticule { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__water { fill: var(--grey-text); font-size: 13px; letter-spacing: 0.02em; font-style: italic; }
.map__pin { fill: var(--ink); transition: r 200ms var(--ease); }
.map__pin--empty { fill: var(--paper); stroke: var(--grey); stroke-width: 1.25; }
.map__hit { fill: transparent; }
.map__port text { fill: var(--ink); font-size: 13px; letter-spacing: 0.01em; }
.map__port .map__count { fill: var(--grey-text); font-size: 10.5px; }
.map__port:hover .map__pin, .map__port:focus-visible .map__pin { r: 6.5; }
.map__port:hover text, .map__port:focus-visible text { text-decoration: underline; text-underline-offset: 3px; }
/* SVG links can't take an outline offset; ring the hit circle instead. */
.map__port:focus-visible { outline: none; }
.map__port:focus-visible .map__hit { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }

.emirates__title { margin-block-end: var(--s-3); font-size: var(--t-body); font-weight: 500; letter-spacing: var(--track-body); }
.emirates { border-top: 1px solid var(--rule); }
.emirates li { border-bottom: 1px solid var(--rule); }
.emirates a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); min-height: 48px; padding-block: 12px; font-size: 1.125rem; font-weight: 500; letter-spacing: var(--track-head); transition: color 200ms var(--ease); }
.emirates a:hover, .emirates a:focus-visible { color: var(--grey-text); }
.emirates small { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emirates--after-map { margin-block-start: var(--s-7); }
@media (max-width: 63.99rem) {
  .ports { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  /* On a phone the map keeps a legible scale and scrolls sideways. row-reverse starts the
     scroll at the east coast, where most ports are; the west (Ruwais, Das Island) is a swipe away. */
  .ports { display: flex; flex-direction: row-reverse; overflow-x: auto; scrollbar-width: none; }
  .ports .map { flex: none; width: 720px; }
}

/* ---------- 24/7: an ink band with a photo ---------------------------- */
.help-band-wrap { margin-block: var(--s-4) var(--s-9); }
.help-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); }
.help-band__text { grid-column: 1 / span 6; padding: clamp(32px, 4.5vw, 64px); }
.help-band__kicker { display: flex; align-items: center; font-size: var(--t-s); color: rgb(255 255 255 / 0.72); }
.help-band__title { margin-block-start: var(--s-3); font-size: var(--t-xl); line-height: 1.1; letter-spacing: var(--track-display); }
.help-band__lede { max-width: 32em; margin-block: var(--s-4) var(--s-6); font-size: 1.125rem; color: rgb(255 255 255 / 0.72); }
.help-band__media { grid-column: 7 / -1; align-self: stretch; }
.help-band__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.help-band :focus-visible { outline-color: var(--paper); }
.btn--on-ink { background: var(--paper); color: var(--ink); }
.btn--on-ink:hover { background: color-mix(in srgb, var(--paper) 86%, var(--ink)); }
@media (max-width: 63.99rem) {
  .help-band__text, .help-band__media { grid-column: 1 / -1; }
  .help-band__media { order: -1; }
  .help-band__media img { min-height: 0; aspect-ratio: 16 / 9; }
}