/* ==========================================================================
   Reviorum — responsive.css
   Shared breakpoints for layout primitives and components.
   Page-specific breakpoints live next to the page styles (assets/css/pages/*).
   Breakpoints: 1280 · 1100 · 1024 · 768 · 640 · 380
   ========================================================================== */

@media (max-width: 1280px) {
  .rv-header__search { width: 240px; }
}

/* ---------- Header: collapse nav, search and login into a panel ---------- */
@media (max-width: 1100px) {
  .rv-header__inner { gap: var(--rv-s-3); flex-wrap: wrap; }
  .rv-header__actions { margin-left: auto; }

  /* Without JS the panel is a normal block under the bar, always visible */
  .rv-header__panel {
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rv-s-3);
    padding: var(--rv-s-2) 0 var(--rv-s-4);
  }
  .rv-nav__list { flex-wrap: wrap; }
  .rv-header__search { width: 100%; margin-left: 0; }

  /* With JS it becomes a toggled dropdown */
  .rv-js .rv-header__toggle,
  .rv-js .rv-header__search-btn { display: inline-flex; }
  .rv-js .rv-header__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100dvh - var(--rv-header-h) - var(--rv-top-offset));
    overflow-y: auto;
    padding: var(--rv-s-4) var(--rv-gutter) var(--rv-s-6);
    background: var(--rv-surface);
    border-bottom: 1px solid var(--rv-line);
    box-shadow: 0 24px 40px -24px rgba(14, 19, 32, 0.3);
  }
  .rv-js .rv-header.is-open .rv-header__panel { display: flex; }
  .rv-js .rv-nav__list { flex-direction: column; }
  .rv-js .rv-nav__link { width: 100%; min-height: 48px; font-size: var(--rv-fs-base); }
  .rv-header__search .rv-search__field { height: 48px; }
  .rv-header__search .rv-search__kbd { display: none; }
}

@media (max-width: 640px) {
  .rv-header__login { display: none; }
  .rv-header__actions .rv-btn { min-height: 40px; padding: 0 14px; }
}

@media (max-width: 380px) {
  .rv-header__inner { gap: var(--rv-s-2); }
  .rv-header__actions { gap: 6px; }
  .rv-brand { gap: 8px; }
  .rv-brand__name { font-size: 1.125rem; }
  .rv-header__actions .rv-btn { padding: 0 10px; }
}
@media (max-width: 340px) {
  /* Search stays reachable inside the opened menu */
  .rv-js .rv-header__search-btn { display: none; }
}

/* ---------- Grids & layouts ---------- */
@media (max-width: 1100px) {
  .rv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-layout-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rv-grid--4,
  .rv-grid--3,
  .rv-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .rv-section__head { align-items: flex-start; }
}

/* ---------- Footer ---------- */
@media (max-width: 900px) {
  .rv-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-8); }
  .rv-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .rv-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Components ---------- */
@media (max-width: 640px) {
  .rv-search--hero .rv-search__row { flex-wrap: wrap; }
  .rv-search--hero .rv-search__type { display: none; }
  .rv-search--hero .rv-btn { width: 100%; }

  .rv-rank-item { gap: var(--rv-s-3); padding: 14px var(--rv-s-4); }
  .rv-rank-item__count,
  .rv-rank-item .rv-stars { display: none; }

  .rv-table th,
  .rv-table td { padding: 12px 14px; }

  .rv-modal__head,
  .rv-modal__body { padding-inline: var(--rv-s-5); }
  .rv-modal__foot { padding: 0 var(--rv-s-5) var(--rv-s-5); flex-direction: column-reverse; }
  .rv-modal__foot .rv-btn { width: 100%; }
}

/* ---------- Filters become an off-canvas drawer ---------- */
@media (max-width: 1024px) {
  .rv-js .rv-filters-toggle { display: inline-flex; }
  .rv-js .rv-filters {
    position: fixed;
    top: var(--rv-top-offset);
    bottom: 0;
    left: 0;
    z-index: 210;
    width: min(360px, 88vw);
    padding: 0 var(--rv-s-5) var(--rv-s-5);
    overflow-y: auto;
    background: var(--rv-surface);
    box-shadow: var(--rv-shadow-pop);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.25s var(--rv-ease), visibility 0s linear 0.25s;
  }
  .rv-js .rv-filters.is-open { transform: none; visibility: visible; transition: transform 0.25s var(--rv-ease); }
  .rv-js .rv-filters__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rv-s-3) 0;
    background: var(--rv-surface);
    border-bottom: 1px solid var(--rv-line);
  }
  .rv-js .rv-filters__foot {
    position: sticky;
    bottom: calc(var(--rv-s-5) * -1);
    display: flex;
    gap: var(--rv-s-2);
    padding: var(--rv-s-3) 0 var(--rv-s-5);
    background: var(--rv-surface);
  }
  .rv-js .rv-filters__foot .rv-btn { flex: 1; }
  .rv-js .rv-filters-overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(14, 19, 32, 0.45);
  }
}

/* ---------- Print ---------- */
@media print {
  .rv-header,
  .rv-footer,
  .rv-filters,
  .rv-filters-toggle { display: none; }
  .rv-body { background: #fff; }
}