/* =====================================================================================
   Language selection page (index.html at the domain root)
   Navy background (the English site's header and hero navy, #0B2A4A), the champagne-gold HIMG logo and the site's own fonts (Playfair Display headings,
   Inter text). Colour values are the site's tokens from styles.css: champagne #D4C1A3, ivory #F7F3EA.
   ===================================================================================== */
:root {
  --lp-bg: #0B2A4A;                       /* = --navy, as at the top of the English site */
  --lp-gold: #D4C1A3;                       /* = --champagne */
  --lp-text: #F7F3EA;                       /* = --ivory */
  --lp-soft: rgba(247, 243, 234, .78);      /* 9:1 on navy */
  --lp-dim: rgba(247, 243, 234, .68);       /* 6.8:1 on navy */
  --lp-line: rgba(212, 193, 163, .32);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--lp-bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; background: var(--lp-bg); color: var(--lp-text);
  font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased;
}
.lp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: clamp(40px, 8vh, 96px) 16px clamp(32px, 6vh, 72px); text-align: center;
}
.lp-logo { display: block; width: clamp(140px, 16vw, 210px); height: auto; margin: 0 0 clamp(36px, 6vh, 64px); }
/* the tagline under the welcome heading: a quiet italic line, then the language prompt */
.lp-tagline { margin: 12px 0 0; color: var(--lp-soft); font-family: var(--font); font-weight: 500; font-size: .8125rem; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; } /* = the English home page's hero kicker ("Expert Hair Restoration for UK Patients") */
.lp-tagline + .lp-sub { margin-top: clamp(22px, 3.5vh, 34px); }
/* the home page video behind everything, kept faint so the text stays easy to read */
.lp-video { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .11; pointer-events: none; }
.lp { position: relative; z-index: 1; }
.lp h1 { margin: 0; font: 400 clamp(1.85rem, 1.35rem + 2vw, 2.75rem)/1.15 var(--serif); color: var(--lp-gold); letter-spacing: .005em; }
.lp-sub { margin: 14px 0 0; color: var(--lp-soft); font-size: .9375rem; letter-spacing: .04em; }
.lp-sub::after { content: ""; display: block; width: 40px; height: 1px; margin: clamp(26px, 4vh, 40px) auto 0; background: var(--lp-gold); opacity: .7; }

/* Language tiles: square 'gallery frame' tiles, as the navigation tiles on the English site
   (thin champagne inner frame, a short gold line, the name in small tracked capitals; on hover the frame steps in). */
.lp nav { display: flex; justify-content: center; width: 100%; }
.lp-list {
  --gap: 16px; list-style: none; width: min(1000px, 100%); margin: clamp(28px, 4vh, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
.lp-list > li { display: flex; min-width: 0; }
.lp-tile {
  --frame: 10px;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  width: 100%; aspect-ratio: 1 / 1; padding: calc(var(--frame) + 14px); text-align: center; overflow: hidden;
  background: rgba(247, 243, 234, .035); color: var(--lp-text); text-decoration: none;
  transition: background-color .35s ease;
}
.lp-tile::after {
  content: ""; position: absolute; inset: var(--frame); border: 1px solid rgba(212, 193, 163, .55); pointer-events: none;
  transition: inset .4s ease, border-color .4s ease;
}
.lp-flag { display: block; width: 56px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px rgba(247, 243, 234, .16); }
.lp-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-body::before { content: ""; width: 22px; height: 1px; background: var(--lp-gold); transition: width .4s ease; }
.lp-name { font-size: .8125rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--lp-text); line-height: 1.3; }
.lp-country { font-size: .75rem; color: var(--lp-dim); letter-spacing: .04em; line-height: 1.3; }
a.lp-tile:hover, a.lp-tile:focus-visible { background: rgba(212, 193, 163, .07); }
a.lp-tile:hover::after, a.lp-tile:focus-visible::after { inset: calc(var(--frame) + 4px); border-color: var(--lp-gold); }
a.lp-tile:hover .lp-body::before, a.lp-tile:focus-visible .lp-body::before { width: 44px; }
a.lp-tile:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
/* a language that is configured but not live yet */
.lp-tile.is-soon { cursor: default; }
.lp-tile.is-soon::after { border-style: dashed; border-color: rgba(212, 193, 163, .35); }
.lp-tile.is-soon .lp-flag, .lp-tile.is-soon .lp-name, .lp-tile.is-soon .lp-country { opacity: .55; }
.lp-soon { margin-top: 4px; color: var(--lp-gold); font-size: .625rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
/* tablets and phones: two tiles per row */
@media (max-width: 899px) {
  .lp-list { --gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(460px, 100%); }
  .lp-tile { --frame: 8px; gap: 16px; padding: calc(var(--frame) + 10px); }
  .lp-flag { width: 46px; }
  .lp-name { font-size: .75rem; letter-spacing: .18em; }
}
@media (prefers-reduced-motion: reduce) { .lp-tile, .lp-tile::after, .lp-body::before { transition: none; } }
.lp-foot { margin: clamp(36px, 6vh, 64px) 0 0; color: var(--lp-dim); font-size: .75rem; letter-spacing: .08em; }
/* the narrowest phones: tiles may be a little taller than wide so the content always fits */
@media (max-width: 420px) {
  .lp-tile { aspect-ratio: auto; min-height: 100%; padding: 26px 14px; gap: 12px; }
  .lp-list > li > .lp-tile { min-height: 150px; }
  .lp-flag { width: 40px; }
  .lp-soon { letter-spacing: .14em; }
}