/* ==========================================================================
   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 ----------------------------------------------------------
   Split hero: kicker · statement (t-display) in cols 1–7 · lead + actions in
   cols 8–12 sitting on the statement's last line · trust row on a hairline.
   The fire site's .hero--split (text + photo) keeps its own layout (theme.css). */
.hero { row-gap: 0; padding-block: clamp(48px, 7vw, 112px) clamp(40px, 5vw, 72px); }
.statement {
  grid-column: 1 / span 9;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.statement .grey { transition: color var(--dur) var(--ease); }
@media (min-width: 64rem) {
  .hero:not(.hero--split) > .hero__kicker { grid-row: 1; }
  .hero:not(.hero--split) > .statement { grid-column: 1 / span 7; grid-row: 2 / span 2; align-self: end; max-width: 12ch; }
  .hero:not(.hero--split) > .hero__lead { grid-column: 8 / -1; grid-row: 2; align-self: end; margin: 0; }
  .hero:not(.hero--split) > .home-hero-actions { grid-column: 8 / -1; grid-row: 3; align-self: end; margin-block-start: var(--s-5); }
  .hero:not(.hero--split) > .trust-row { grid-row: 4; margin-block-start: clamp(40px, 5vw, 72px); padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
}
.hero + .wrap > .home-figure { margin-block-end: var(--row-y); }

/* The sentence search: "I need ___ in ___ → Search" */
.ask {
  grid-column: 1 / -1;
  margin-block-start: clamp(48px, 6vw, 88px);
  display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; row-gap: var(--s-4);
  font-size: var(--t-l); 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 330px; }
.ask__field input, .ask__field select {
  width: 100%; min-height: 56px;
  border: 0; border-bottom: 1px solid var(--ink); 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;
}
.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 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-width: 2px; padding-bottom: 7px; }
.ask__submit { font-size: var(--t-body); margin-inline-start: var(--s-3); }
/* The type-ahead listbox sits under the 32px 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 / span 10; margin-block-start: var(--s-6); 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; font-size: 1.375rem; 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%; }
  .popular { grid-column: 1 / -1; }
}

/* ---------- At a glance: numbers as prose ------------------------------- */
.home-glance { margin-block-start: var(--s-9); }
.stats-line {
  grid-column: 3 / span 9;
  font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display);
  color: var(--grey); text-wrap: balance;
}
.stats-line b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-line__end { color: var(--ink); }
@media (max-width: 63.99rem) { .stats-line { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) { .home-glance { margin-block-start: var(--s-8); } }

/* ---------- Ports: line map + grey emirates list ------------------------ */
.ports { grid-column: 3 / -1; margin-block-start: var(--s-8); }
.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 { font-size: var(--t-l); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.emirates a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); min-height: 44px; color: var(--grey); transition: color 200ms var(--ease); }
.emirates a:hover, .emirates a:focus-visible { color: var(--ink); }
.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; margin-block-start: var(--s-7); }
  .emirates.row__side { margin-block-start: var(--s-6); }
  .emirates a { color: var(--ink); }
}
@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; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .ports .map { flex: none; width: 720px; }
}

/* ---------- 24/7 ---------------------------------------------------------- */
.row__big .dot { width: 12px; height: 12px; vertical-align: 0.3em; margin-inline-end: 14px; }
.home-spaced { margin-block-start: var(--s-7); }

/* ---------- Journal ------------------------------------------------------- */
.home-journal-head { margin-block-end: var(--head-gap); }