/* Shared design rules: one filled call to action per screen, navy selected chips with an edge fade, company avatars as
   rounded squares, image cards with a bottom gradient, 44px touch targets, press states and image skeletons. */

/* Buttons: blue fill is the one primary action; navy buttons are the outlined secondary */
.btn-dark { background: transparent; color: var(--pine); border: 1.5px solid var(--pine); }
.btn-dark:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); color: var(--pine); }
html[data-theme="dark"] .btn-dark { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.btn:active:not(:disabled) { transform: scale(.97); }
.ic.up { transform: rotate(-90deg); }

/* Chips: the selected one is filled navy */
.chip.active, .chip.on, .chip-rail .chip.on, .cat-list a.active, .hub-main [data-feed-tabs] a.active {
  background: var(--pine); color: #fff; border-color: var(--pine); }
html[data-theme="dark"] :is(.chip.active, .chip.on, .chip-rail .chip.on, .cat-list a.active, .hub-main [data-feed-tabs] a.active) {
  background: var(--accent); border-color: var(--accent); color: #fff; }
a.chip:active, .cat-list a:active, .tabs a:active { transform: scale(.96); }

/* Horizontal rows fade at the edge that has more to scroll (classes set by shell.js) */
.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
[dir="rtl"] .fade-end:not(.fade-start) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
[dir="rtl"] .fade-start:not(.fade-end) { -webkit-mask-image: linear-gradient(to left, transparent, #000 36px); mask-image: linear-gradient(to left, transparent, #000 36px); }

/* Avatars: people are circles, companies are 12px rounded squares, and a story ring follows the avatar's shape */
.avatar.sq { border-radius: min(12px, 30%); }
.ring:has(> .avatar.sq), .reel-rail .ring:has(> .avatar.sq), .prof-avatar .ring:has(> .avatar.sq) { border-radius: 16px; }
.ring:has(> .avatar.sq) > .avatar.sq { border-radius: 13px; }

/* Image cards: 40% bottom gradient, 16px padding, titles stop at two lines, no arrow floating over the photo */
.dest::after, .hall::after { background: linear-gradient(180deg, transparent 60%, rgba(7, 24, 47, .88)); }
.dest-cap, .hall-cap { padding: 16px; text-shadow: 0 1px 8px rgba(7, 24, 47, .55); }
.dest-cap strong, .hall-cap strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dest-go { display: none; }
.dest:active, .hall:active, .tile:active, .hub-tile:active, .s-card:active, .tpick:active { transform: scale(.985); }

/* Images: a shimmer while loading, the branded placeholder when there is none (shell.js) */
img.skel { background: linear-gradient(100deg, #e3e9f2 30%, #f2f5fa 50%, #e3e9f2 70%) 0 0 / 220% 100%; animation: skel 1.3s linear infinite; }
html[data-theme="dark"] img.skel { background-image: linear-gradient(100deg, #1a2638 30%, #23324a 50%, #1a2638 70%); }
@keyframes skel { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.dest, .hall { background: #dfe6f0 url("/img/placeholder.svg") center / cover; }
img.img-ph { object-fit: cover; }

/* Supplier logos on cards: three small logos and "+N", or a "New" tag when there are fewer than three */
.logo-row { display: inline-flex; align-items: center; }
.logo-row .avatar { box-shadow: 0 0 0 2px #fff; background: #fff; }
.logo-row .avatar + .avatar, .logo-row .avatar + .logo-more { margin-inline-start: -7px; }
.logo-more { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--pine); font: 700 .72rem/1 var(--f-display); box-shadow: 0 0 0 2px rgba(255, 255, 255, .0); }
.new-tag { justify-self: start; display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--sun); color: var(--pine); font: 700 .72rem/1.2 var(--f-display); text-shadow: none; }

/* Destination list: same cards as the home page; countries without a photo get a solid navy card with a large icon */
.dest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.dest-solid { background: linear-gradient(145deg, var(--pine), #1b4277); }
.dest-big { position: absolute; inset: 0 0 35% 0; display: grid; place-items: center; color: rgba(255, 255, 255, .22); z-index: -1; }
.dest-solid .dest-code { position: absolute; top: .8rem; inset-inline-start: .8rem; padding: .3rem .5rem; border-radius: 6px; background: rgba(7, 24, 47, .55); color: var(--sun); font: 700 .75rem/1 var(--f-display); letter-spacing: .1em; }
.dest-solid::after { background: linear-gradient(180deg, transparent 60%, rgba(7, 24, 47, .5)); }
.dest-search { grid-template-columns: 1fr auto; margin-top: 0; }

/* Sticky filter bar under the header: Sector, Country, Available for meetings, Has offers */
.filter-sticky { position: sticky; top: calc(var(--hdr-h) - 1px); z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); margin-top: -1.5rem; }
.fs-row { display: flex; align-items: center; gap: .5rem; width: min(100% - 2.5rem, var(--max, 1200px)); margin-inline: auto; padding-block: .55rem; overflow-x: auto; scrollbar-width: none; }
.fs-row::-webkit-scrollbar { display: none; }
.fs-row select.input { flex: 0 0 auto; width: auto; max-width: 200px; min-height: 44px; padding-block: .35rem; border-radius: 999px; font-size: .9rem; }
.fs-chip { position: relative; flex: none; cursor: pointer; }
.fs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fs-chip span { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding-inline: .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 .9rem/1 var(--f-body); white-space: nowrap; transition: background .18s, color .18s, border-color .18s; }
.fs-chip input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; }
.fs-chip input:focus-visible + span { outline: 2.5px solid var(--accent); outline-offset: 2px; }
html[data-theme="dark"] .fs-chip input:checked + span { background: var(--accent); border-color: var(--accent); }

/* Touch: 44px reach on everything tappable, without moving the layout */
@media (pointer: coarse), (max-width: 960px) {
  .btn { min-height: 44px; }
  :where(.chip, .cat-list a, .tabs a, .like, main .icon-btn) { position: relative; }
  :is(.chip, .cat-list a, .tabs a)::after { content: ""; position: absolute; inset: -6px -2px; }
  :is(.like, main .icon-btn)::before { content: ""; position: absolute; inset: max(-9px, calc((100% - 44px) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  img.skel { animation: none; }
  .btn:active, a.chip:active, .dest:active, .hall:active, .tile:active, .hub-tile:active, .s-card:active, .tpick:active { transform: none; }
}
@media (max-width: 700px) { .dest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .dest-list .dest-cap { padding: 12px; } .dest-list .dest-cap strong { font-size: .95rem; } .dest-big svg { width: 44px; height: 44px; } }

/* Booth: action rows, snapshot, sticky tabs, sticky CTA */
.booth-actions { grid-column: 1 / -1; display: grid; gap: .5rem; width: 100%; }
.booth-actions .btn { min-height: 44px; justify-content: center; white-space: nowrap; border-radius: 12px; }
.ba-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ba-row form { display: contents; }
.ba-row .btn { width: 100%; padding-inline: .4rem; gap: .35rem; font-size: .88rem; overflow: hidden; }
.booth-snap { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; padding: .9rem 1rem; margin: .4rem 0 .2rem; }
.booth-snap dt { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--muted); }
.booth-snap dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 600; }
.booth-tabs-wrap { position: sticky; top: calc(var(--hdr-h) - 1px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: .8rem; }
.booth-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-block: .45rem; }
.booth-tabs::-webkit-scrollbar { display: none; }
.booth-tabs a { flex: 1 0 auto; text-align: center; padding: .55rem .9rem; min-height: 40px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.booth-tabs a.on { background: var(--navy, var(--ink)); color: #fff; }
.booth-grid [id] { scroll-margin-top: calc(var(--hdr-h) + 64px); }
.booth-cta { display: none; }
@media (max-width: 960px) {
  .booth-cta { position: fixed; inset-inline: 1rem; bottom: calc(var(--tab-space) + 10px); z-index: 35; min-height: 48px; justify-content: center; border-radius: 14px; box-shadow: 0 10px 24px -8px rgba(10, 30, 60, .45); }
  .booth-cta.on { display: inline-flex; }
}
@media (min-width: 701px) { .booth-snap { grid-template-columns: repeat(4, 1fr); } }

/* Social profile: no ring unless a story is live, linked company line, tappable stats, sparse grids as cards */
.prof-avatar .ring { display: inline-block; }
.prof-avatar .plain { display: inline-block; padding: 3px; }
.prof-avatar .plain .avatar, .prof-avatar .ring .avatar { display: grid; }
.prof-stats a { display: grid; color: inherit; text-align: center; min-height: 44px; align-content: center; }
.prof-line .prof-company { display: inline; font-size: inherit; margin: 0; }
@media (max-width: 960px) {
  .prof-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .prof-btns > form { display: contents; }
  .prof-btns .btn { min-height: 44px; border-radius: 12px; }
  .prof-btns .btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
  .prof-btns .btn-dark { background: transparent; border: 1.5px solid var(--navy, var(--ink)); color: var(--navy, var(--ink)); }
}
.prof-grid.sparse { grid-template-columns: 1fr; gap: .8rem; margin-inline: 0; }
.prof-grid.sparse .tile { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.people-row { display: flex; align-items: center; gap: .8rem; color: inherit; }
.people-row span { display: grid; min-width: 0; }

/* Feed: pinned filter chips under the stories row, caught-up divider, suggested-company card */
.feed-chips-wrap { position: sticky; top: calc(var(--hdr-h) - 1px); z-index: 30; background: var(--bg); margin-inline: -1.25rem; padding-inline: 1.25rem; border-bottom: 1px solid var(--line); }
.feed-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-block: .55rem; margin: 0 !important; border: 0; }
.feed-chips::-webkit-scrollbar { display: none; }
.feed-chips a { flex: none; padding: .5rem 1rem; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--ink-2); background: var(--surface, var(--bg)); text-transform: none; letter-spacing: 0; box-shadow: none; }
.feed-chips a.active { background: var(--navy, var(--ink)); border-color: transparent; color: #fff; }
.caught-up { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .3rem; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.caught-line { flex: 1; height: 1px; background: var(--line); }
.caught-text { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--muted); }
.caught-link { display: flex; justify-content: center; align-items: center; gap: .3rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 600; color: var(--accent-2); min-height: 40px; }
.sup-suggest { position: relative; display: grid; gap: .7rem; padding: .9rem 1rem 1rem; }
.sup-why { margin: 0; padding-inline-end: 2.4rem; display: flex; align-items: center; gap: .3rem; }
.sup-x { position: absolute; inset-block-start: .3rem; inset-inline-end: .3rem; }
.sup-main { display: flex; gap: .8rem; align-items: flex-start; color: inherit; min-width: 0; }
.sup-text { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.sup-pitch { font-size: .88rem; color: var(--ink-2); line-height: 1.4; }
.sup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sup-actions form { display: contents; }
.sup-actions .btn { min-height: 44px; justify-content: center; border-radius: 12px; }
.sup-actions .btn.is-done { background: transparent; color: var(--navy, var(--ink)); border: 1.5px solid var(--navy, var(--ink)); }

/* Booth page: the sticky "Request a meeting" bar floats above the tab bar, so the last card needs room beneath it. */
@media (max-width: 960px) { body:has(.booth-cta) { padding-bottom: calc(var(--tab-space) + 88px); } }

/* Tourism board: third role card, country dashboard, authority page */
.role-opt:last-child:nth-child(3) { grid-column: 1 / -1; }
.board-insights { display: grid; gap: 1.1rem; margin-bottom: 1.2rem; }
.board-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; justify-content: space-between; }
.board-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.board-kpi { display: grid; gap: .15rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2, var(--surface)); }
.board-kpi strong { font-size: 1.6rem; line-height: 1.1; }
.board-kpi .chip { justify-self: start; }
.board-cols { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .board-cols { grid-template-columns: 1.2fr 1fr; } }
.board-bars { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding-top: 6px; }
.board-bars span { flex: 1; height: max(var(--h), 4%); border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; }
.board-types, .board-stats, .board-top, .board-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.board-types li { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; gap: .6rem; align-items: center; font-size: .9rem; }
.board-types i { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--accent) var(--w), var(--line) var(--w)); }
[dir=rtl] .board-types i { background: linear-gradient(to left, var(--accent) var(--w), var(--line) var(--w)); }
.board-stats li, .board-top li { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.board-todo ul { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.board-todo li { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-2); }
.board-todo li.is-done { color: var(--ink); } .board-todo li.is-done svg { color: var(--pine); }
.board-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.board-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--line); display: block; }
.board-gallery.pub { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.board-places { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.board-places li { display: grid; gap: .1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; }
.board-tagline { font-size: 1.15rem; font-weight: 600; margin: 0; }
.board-edit { padding-block: 1rem 2rem; display: grid; gap: 1rem; }

/* Readable chips and step cards; compact join button in the phone header */
.mobile-join { display: none; }
.chip, .chip-rail .chip { font-size: .875rem; min-height: 40px; padding-inline: .9rem; color: #374151; background: var(--surface, #fff); border: 1px solid var(--line, #d1d5db); }
.chip.active, .chip.on, .chip-rail .chip.on { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); color: #fff; }
html[data-theme="dark"] .chip:not(.active):not(.on) { color: #e5e7eb; }
.how-steps p, .how-steps .muted { font-size: .875rem; line-height: 1.7; color: #4b5563; }
html[data-theme="dark"] :is(.how-steps p, .how-steps .muted) { color: #cbd5e1; }
@media (max-width: 480px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .mobile-join { display: inline-flex; white-space: nowrap; }
  .site-header .nav-actions { flex-wrap: nowrap; gap: 8px; }
}