/* ---------- Lifestyle hub (/lifestyle/) — cross-country entry point, 24 Sep 2026 ---------- */
.lh-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(2,28,63,.12); }
.lh-stats div { min-width: 120px; }
.lh-stats dt { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600); margin-bottom: 4px; }
.lh-stats dd { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1.1; }

.lh-jump { border-top: 1px solid rgba(2,28,63,.08); padding: 14px 0; }
.lh-jump .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lh-jump .label { margin-right: 6px; font-size: 12px; }
.lh-jump-a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(2,28,63,.14); background: var(--white); font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.lh-jump-a:hover { border-color: var(--navy); text-decoration: none; }
.lh-jump-all { background: var(--navy); color: var(--white); border-color: var(--navy); }
.lh-jump-all:hover { color: var(--white); background: var(--navy-800); }

.lh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; margin-top: 30px; }
.lh-card { background: var(--white); border: 1px solid rgba(2,28,63,.08); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; position: relative; scroll-margin-top: 90px; transition: transform var(--transition-normal), box-shadow var(--transition-normal); }
.lh-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--navy); z-index: 2; }
.lh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.lh-card .cr-media { border-radius: 0; }
.lh-noflag { aspect-ratio: 16 / 9; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.lh-noflag img { width: 96px; height: auto; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.lh-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.lh-body h3 { font-size: 26px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.lh-body h3 a { color: inherit; text-decoration: none; }
.lh-body h3 a:hover { color: var(--red); }
.lh-n { font-family: var(--sans); font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.lh-n span { font-size: 13px; color: var(--navy-500); margin-left: 6px; }
.lh-mix { font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--navy-700); margin-bottom: 14px; }
.lh-start { font-size: 16px; line-height: 1.5; color: var(--navy-700); margin-bottom: 18px; flex: 1; }
.lh-start span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600); margin-right: 4px; }
.lh-start a { font-weight: 700; color: var(--navy); }
.lh-start em { display: block; font-style: normal; font-size: 15px; color: var(--navy-600); margin-top: 2px; }
.lh-go { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

.lh-filters { margin-top: 26px; position: static; }
.lh-filters .wrap { flex-direction: column; align-items: stretch; gap: 12px; }
.ls-chip span { font-weight: 500; opacity: .7; margin-left: 2px; }
.lh-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.lh-field { display: flex; flex-direction: column; gap: 6px; }
.lh-field .label { font-size: 12px; }
.lh-field select, .lh-field input { font-family: var(--sans); font-size: 17px; min-height: 48px; padding: 10px 14px; border: 2px solid var(--navy); border-radius: 10px; background: var(--white); color: var(--navy); }
.lh-search { flex: 1; min-width: 220px; max-width: 420px; }
.lh-controls .ls-count { margin-left: auto; align-self: center; }

.lh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 26px; }
.lh-row { background: var(--white); border: 1px solid rgba(2,28,63,.1); border-radius: var(--radius-lg); padding: 18px 20px 16px; display: flex; flex-direction: column; }
.lh-row.cr-sister { border-color: rgba(163,39,44,.35); }
.lh-row .cr-top { margin-bottom: 10px; }
.lh-row h3 { font-size: 19px; line-height: 1.25; margin-bottom: 6px; }
.lh-row h3 a { color: inherit; text-decoration: none; }
.lh-row h3 a:hover { color: var(--red); }
.lh-row .cr-who { flex: 1; }
.lh-where { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-500); margin-bottom: 8px; line-height: 1.35; }
.lh-where .flag-inline { flex: none; }
.lh-row .cr-foot a.lh-country { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lh-row .cr-foot a.lh-country:hover { color: var(--red); }
.lh-row[data-platform="instagram"] .cr-platform, .lh-row[data-platform="tiktok"] .cr-platform { background: var(--navy-700); }
.lh-row[data-platform="podcast"] .cr-platform { background: var(--navy-800); }
.lh-row[data-platform="blog"] .cr-platform, .lh-row[data-platform="community"] .cr-platform { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
.lh-loading, .lh-none { grid-column: 1 / -1; padding: 30px 0; color: var(--navy-600); text-align: center; }
.lh-more-wrap { text-align: center; padding: 26px 0 30px; }
.lh-more-wrap .btn { min-height: 48px; }

@media (max-width: 640px) {
  .lh-grid, .lh-list { grid-template-columns: 1fr; }
  .lh-stats { gap: 14px 24px; }
  .lh-stats dd { font-size: 28px; }
  /* phones: the 22 country cards follow straight away, so keep only the directory shortcut */
  .lh-jump .label, .lh-jump-a:not(.lh-jump-all) { display: none; }
  .lh-jump-all { width: 100%; justify-content: center; }
  .lh-search { max-width: none; min-width: 0; width: 100%; }
  .lh-field { width: 100%; }
  .lh-field select, .lh-field input { width: 100%; }
  .lh-controls .ls-count { margin-left: 0; }
}