/* === FLUID RESPONSIVE LOGIC === */
:root { --hero-rows: 1; }
    @media (min-height: 500px) { .vinfo h4 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.6em; } }
    @media (min-height: 600px) { .app .goal { display: block; } }
    @media (min-width: 480px) { :root { --cp: 11px; --cg: 8px; --vcard-w: 195px; } .app .xs-row { display: none; } .app .sm-sections { display: flex; } }
    @media (min-width: 600px) and (min-height: 800px) { :root { --cp: 14px; --cg: 10px; --vcard-w: 210px; } .app .goal { display: none; } .app .vinfo h4 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: auto; max-height: 2.6em; margin-bottom: 2px; } .app .h-snap { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; } .app .h-snap .vcard { width: var(--vcard-w); flex: 0 0 auto; } }
    @media (min-width: 800px) and (min-height: 1100px) { .app .goal { display: block; } .app .vinfo h4 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; height: 2.6em; } }
    @media (min-width: 1180px) and (min-height: 800px) { .app .goal { display: block; } .app .sm-sections { flex-direction: column; } .app .h-snap { display: flex; flex-direction: row; } .app .h-snap .vcard { width: var(--vcard-w); flex: none; } }
    @media (min-width: 1000px) { .sidebar { display: flex; } .app .goal { display: block; } :root { --hero-rows: 1; } .app .sm-sections { flex-direction: column; gap: 28px; } .app .h-snap { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 15px; padding-bottom: 8px; } }
    @media (min-width: 600px) { :root { --avail-h: calc(100vh - 380px); --section-h: max(170px, calc(var(--avail-h) / 3)); --thumb-h: calc(var(--section-h) - 85px); --vcard-w: calc(var(--thumb-h) * 1.777); --section-min-h: 170px; } .app .h-snap .vcard, .app #sm-pop .vcard { width: clamp(160px, var(--vcard-w), 85vw); } }
    @media (min-width: 600px) and (max-width: 999px) and (min-height: 900px) { .app .goal { display: block; } .app #sm-pop { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 10px; } .app #sm-pop .vcard { flex: 0 0 auto; } }

/* === LANDSCAPE === */
@media (max-height: 480px) and (orientation: landscape) {
      :root { --cp: 8px; --cg: 5px; }
      .app .hdr { height: 36px; padding: 0 8px; }
      .app .chips { display: none; }
      .app .goal { display: block; padding: 6px 10px; margin-bottom: 2px; }
      .app .sm-sections { display: flex; flex-direction: row; gap: 8px; height: 100%; }
      .app .sm-section { flex: 1; min-width: 0; }
      .app .sec-hd h3 { font-size: 8px; }
      .app .sec-hd .see-btn { font-size: 0; }
      .app .sec-hd .see-btn::after { content: "More ↕"; font-size: 9px; }
      .app .h-snap { flex-direction: column; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; }
      .app .h-snap .vcard, .app #sm-pop .vcard { width: 100%; height: auto; flex: none; }
      .app .h-snap .vcard .vthumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
      .app .vinfo { padding: 4px 6px; }
      .app .vinfo h4 { white-space: nowrap; height: 1.3em; margin-bottom: 2px; }
      .app .hgrid { display: flex; gap: 6px; overflow-x: auto; }
      .app .hcard { flex: 0 0 clamp(55px, 16vh, 72px); padding: 6px 2px; min-width: 0; }
      .app .hpfp { width: clamp(24px, 8vh, 36px); height: clamp(24px, 8vh, 36px); margin-bottom: 3px; }
      .app .hnm { font-size: clamp(8px, 2.5vh, 10px); }
      .app .journey-row { padding-top: 0; }
      .app .cta { padding: 6px; font-size: 10px; }
      .app .mode-tabs { margin-top: 3px; }
      .app .mode-tab { padding: 5px 1px; font-size: 8px; }
    }
    @media (max-height: 450px) { .app .goal { display: none; } }