/**
 * File: assets/css/frontend/pages/responsive.css
 * Purpose: Provides responsive containment for generic pages, Page Sidebar, block alignments and system pages.
 * Scope: T8 page responsiveness only.
 * Related PHP: src/Frontend/Pages/PagePresentation.php
 * Related CSS: assets/css/frontend/pages/page.css, assets/css/frontend/pages/sidebar.css, assets/css/frontend/pages/system.css
 * Related JS: None
 * Package: HyperDAF Pro
 */

@media (max-width: 64rem) {
    .hdf-page,
    .hdf-system-page,
    .hdf-plugin-page-fallback { width: min(calc(100% - (2 * var(--hdf-layout-gutter-tablet))), var(--hdf-page-wide-width)); }
    .hdf-page--sidebar-left .hdf-page-layout,
    .hdf-page--sidebar-right .hdf-page-layout { grid-template-columns: 1fr; gap: var(--hdf-spacing-7); }
    .hdf-page--sidebar-left .hdf-page-sidebar { order: 2; }
    .hdf-page-content .alignwide { width: calc(100vw - (2 * var(--hdf-layout-gutter-tablet))); }
}

@media (max-width: 47.99rem) {
    .hdf-page,
    .hdf-system-page,
    .hdf-plugin-page-fallback { width: min(calc(100% - (2 * var(--hdf-layout-gutter-mobile))), var(--hdf-page-wide-width)); padding-block: var(--hdf-spacing-7); }
    .hdf-page-entry,
    .hdf-system-page__inner { padding: var(--hdf-spacing-5); }
    .hdf-page-content .alignwide { width: calc(100vw - (2 * var(--hdf-layout-gutter-mobile))); }
    .hdf-system-page__search .search-form { display: grid; gap: var(--hdf-spacing-2); }
    .hdf-system-page__search .search-field,
    .hdf-system-page__search .search-submit { width: 100%; border-radius: var(--hdf-radius-md); }
}
