/* Adria Congress — landing system
   Type: Roboto, taken from the client's OWN stylesheet (adria-congress.com/public/css/main.css
   declares `body, h1..h6 { font-family: "Roboto", sans-serif }`; Lato is linked in their HTML but
   never used in any rule). One family in both roles, hierarchy by weight/size/tracking.
   Palette: sampled from the logo pixels (three sails + wordmark), not from the Flat-UI template
   colours that fill their bootstrap CSS. */

:root {
  --navy:        #0f1d2c;   /* wordmark "Adria" */
  --navy-deep:   #09273c;   /* lowest sail */
  --navy-soft:   #1c3350;
  --red:         #b8232b;   /* "congress" wordmark + logo sail (also their own CSS) */
  --red-bright:  #cd352f;   /* logo sail, lighter */
  --teal:        #77979f;   /* top sail */
  --teal-pale:   #e7eef0;
  --paper:       #ffffff;
  --paper-soft:  #f6f8f9;
  --ink:         #17222e;
  --ink-soft:    #4e5f6e;
  --line:        #dde5e8;

  --track-lockup: .34em;    /* the logo's own "c o n g r e s s" letterspacing */
  --maxw: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(15,29,44,.06), 0 8px 28px rgba(15,29,44,.07);
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchor targets must clear the sticky topbar, or a CTA jump lands the reader
   under the header (68px desktop / 60px mobile). */
[id] { scroll-margin-top: 84px; }
@media (max-width: 720px) { [id] { scroll-margin-top: 72px; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(52px, 6.5vw, 104px) 0; }
.sec-head { max-width: 82ch; }
.eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-lockup); color: var(--red);
  margin: 0 0 14px;
}
.eyebrow--onDark { color: #e9b8b6; }

h1, h2, h3, h4 { font-weight: 700; color: var(--navy); margin: 0 0 .55em; text-wrap: balance; }
h1 {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 4.1rem);
  line-height: 1.06; letter-spacing: -0.018em; max-width: 24ch;
}
h2 {
  font-size: clamp(1.55rem, 1rem + 1.7vw, 2.6rem);
  line-height: 1.14; letter-spacing: -0.012em; max-width: 30ch;
}
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.42rem); line-height: 1.26; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
.lead { font-size: clamp(1.03rem, .97rem + .35vw, 1.28rem); color: var(--ink-soft); max-width: 66ch; }
.small { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 700; font-size: 16px;
  padding: 15px 28px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; text-align: center; transition: background .16s, color .16s, border-color .16s;
  min-height: 52px;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: #9d1c23; color: #fff; text-decoration: none; }
.btn--ghostLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghostLight:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.btn--block { width: 100%; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.topbar__logo img { width: 178px; }
.topbar__sp { flex: 1 1 auto; }
.topbar .btn { padding: 11px 20px; min-height: 44px; font-size: 15px; }

/* language toggle — visible side-by-side, both options legible */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lang button {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  padding: 8px 13px; background: #fff; color: var(--navy-soft);
  border: 0; cursor: pointer; text-transform: uppercase;
}
.lang button + button { border-left: 1px solid var(--line); }
.lang button[aria-current="true"] { background: var(--navy); color: #fff; }
.lang[hidden] { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff;
  background: var(--navy-deep) url("img/hero-gala-pines.jpg") center 38% / cover no-repeat;
  padding: clamp(72px, 9vw, 152px) 0 clamp(64px, 8vw, 128px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, rgba(9,25,40,.92) 0%, rgba(9,25,40,.80) 46%, rgba(9,25,40,.46) 100%);
}
.hero__in { position: relative; }
.hero h1 { color: #fff; }
.hero__sub {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.4rem);
  color: #dbe6ec; max-width: 54ch; margin: 0 0 32px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__rea { margin: 22px 0 0; font-size: 14.5px; color: #b9cbd6; }

/* ---------- two tracks ---------- */
.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 42px; }
.track {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.track__img { aspect-ratio: 3 / 2; }
.track__img img { width: 100%; height: 100%; object-fit: cover; }
.track__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.track__tag {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-lockup); color: var(--teal); margin: 0 0 10px;
}
.track ul { margin: 4px 0 22px; padding: 0 0 0 20px; }
.track li { margin-bottom: 7px; }
.track .btn { margin-top: auto; align-self: flex-start; }

/* ---------- scope list ---------- */
.scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 44px; margin-top: 36px; padding: 0; list-style: none; }
.scope li {
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.scope li::before {
  content: ""; width: 9px; height: 9px; margin-top: .52em; border-radius: 50%;
  background: var(--red); grid-row: 1 / span 2;
}
.scope b { color: var(--navy); font-weight: 700; }
.scope span { color: var(--ink-soft); font-size: 15.5px; grid-column: 2; }

/* ---------- destination (dark band) ---------- */
.dest { background: var(--navy); color: #e5edf1; }
.dest h2 { color: #fff; }
.dest .lead, .dest p { color: #c3d2db; }
.dest .sec-head .lead { color: #c3d2db; }
/* Dubrovnik / the coast / across the border. Two picture cards then one wide text card;
   the wide card spans both columns so the last row never leaves a hole. */
.destgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 42px; }
.destcard {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.destcard--wide { grid-column: 1 / -1; }
<<<<<<< Updated upstream
/* `flex: none` on the picture and `flex: 1 1 auto` on the body are BOTH load-bearing, the
   same pairing .track__img/.track__body uses. Without a growing sibling the card's height is
   content-driven, the img's height:100% resolves against an indefinite height and falls back
   to the file's intrinsic ratio — so aspect-ratio is silently ignored and two cards in one row
   get different picture heights (measured 551x381 vs 551x477 against the intended 551x367)
   while getComputedStyle still reports aspect-ratio "3 / 2". Verify with
   getBoundingClientRect, never the computed style. */
.destcard__img { aspect-ratio: 3 / 2; flex: none; }
.destcard__img img { width: 100%; height: 100%; object-fit: cover; }
=======
/* The ratio goes on the IMG together with height:auto — NOT on the wrapper.
   A wrapper `aspect-ratio` with a `height:100%` child resolves against an indefinite height
   and silently falls back to the FILE's intrinsic ratio, so two cards in one row rendered at
   different picture heights (measured 551x381 and 551x477 against the intended 551x367) while
   getComputedStyle still reported aspect-ratio "3 / 2". The HTML width/height attributes also
   map to the CSS height property as a presentational hint, which is why height:auto is
   required for the ratio to compute at all. Always verify this with getBoundingClientRect,
   never with the computed style. */
.destcard__img { flex: none; }
.destcard__img img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
>>>>>>> Stashed changes
.destcard__body { padding: 26px 26px 28px; flex: 1 1 auto; }
/* This band paints its own dark background, so every text primitive inside it restates
   its on-dark colour — inheriting the light theme would put dark grey on navy. */
.destcard h3 { color: #fff; margin-bottom: .45em; }
.destcard p { color: #c3d2db; margin-bottom: 0; }
.destcities {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.destcities li {
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: #dbe6ec;
}

/* ---------- references ---------- */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.ref { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.ref__img { aspect-ratio: 16 / 11; }
.ref__img img { width: 100%; height: 100%; object-fit: cover; }
.ref__body { padding: 17px 19px 19px; }
.ref__name { font-weight: 700; color: var(--navy); margin: 0 0 3px; font-size: 16.5px; }
.ref__meta { margin: 0; font-size: 14px; color: var(--ink-soft); }
.reftracks { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; margin-top: 38px; }
.reftrack h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-lockup);
  color: var(--red); margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); max-width: none;
}
.reflist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.reflist li {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: 14.5px; color: var(--navy-soft); background: var(--paper-soft);
}

/* ---------- credibility ---------- */
.creds { background: var(--paper-soft); }
.creds__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; }
.cred { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cred__k { font-weight: 700; color: var(--navy); margin: 0 0 6px; font-size: 16px; }
.cred__v { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- form ---------- */
.enquiry { background: var(--navy-deep); color: #e5edf1; }
.enquiry h2 { color: #fff; }
.enquiry .lead, .enquiry p { color: #c3d2db; }
.enquiry__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.enquiry ul { margin: 22px 0 0; padding: 0 0 0 20px; }
.enquiry li { margin-bottom: 9px; color: #c3d2db; }

.card {
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px); border-top: 4px solid var(--red);
  box-shadow: 0 18px 50px rgba(4,16,28,.28);
}
.card__title { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.5rem); color: var(--navy); margin: 0 0 6px; }
.card__note { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 22px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 13px; border: 1px solid #c6d2d8; border-radius: var(--radius);
  background: #fff; min-height: 48px;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--red); background: #fdf5f5; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin: 6px 0 18px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; min-height: 0; flex: none; }
.consent label { font-size: 13.8px; color: var(--ink-soft); font-weight: 400; line-height: 1.5; margin: 0; }
.consent.attention { animation: shake .4s; }
.consent.attention label { color: var(--red); }
.consent.attention input { outline: 2px solid var(--red); outline-offset: 2px; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-6px); } 44% { transform: translateX(6px); }
  66% { transform: translateX(-4px); } 88% { transform: translateX(4px); }
}
.err { display: none; margin: 0 0 14px; font-size: 14.5px; color: var(--red); font-weight: 700; }
.err.on { display: block; }
.reassure { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); text-align: center; }

/* ---------- faq ---------- */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 19px 40px 19px 0; font-weight: 700; color: var(--navy);
  position: relative; list-style: none; font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--red);
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq__a { padding: 0 0 20px; color: var(--ink-soft); max-width: 78ch; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: #a9bdc9; padding: 52px 0 40px; font-size: 14.5px; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.foot img { width: 168px; margin-bottom: 16px; }
.foot h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-lockup); margin: 0 0 12px; }
.foot a { color: #d6e2ea; }
.foot p { margin: 0 0 8px; }
.foot__legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 20px; font-size: 13px; color: #8ba3b2; }

/* ---------- reveal: progressive enhancement only ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .dest__grid, .enquiry__grid, .reftracks { grid-template-columns: 1fr; gap: 32px; }
  .creds__grid { grid-template-columns: repeat(2, 1fr); }
  .refs { grid-template-columns: repeat(2, 1fr); }
  .scope { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .tracks { grid-template-columns: 1fr; gap: 20px; }
  .destgrid { grid-template-columns: 1fr; gap: 20px; }
  .refs { grid-template-columns: 1fr; }
  .creds__grid { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 26px; }
  .topbar__in { min-height: 60px; gap: 10px; }
  .topbar__logo img { width: 138px; }
  .topbar .btn--primary { display: none; }   /* sticky CTA below covers it */
  .hero { background-position: center 42%; }
  .hero__cta .btn { width: 100%; }
  /* on-image / label text never below 13px */
  .track__tag, .eyebrow, .foot h4 { font-size: 12px; }
}

/* sticky mobile CTA */
.stickycta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .stickycta { display: block; } body { padding-bottom: 78px; } }