/* ==========================================================================
   page-templates-frameworks.css
   Styles for page-templates-frameworks.hbs, lifted out of the inline <style>
   block that page used to carry.

   Everything else this page needs (the search bar, the filter panel, the post
   cards, the mobile filter/sort modals) already lives in style.css, which the
   template links first - only the page-level overrides belong here.

   Isolation
   ---------
   The rules are scoped under the `.page-templates-frameworks` root class on
   <main>, so the generic `.product__case*` names cannot reach any other
   template that reuses them. `.site-wrapper` is an ancestor of the page root,
   so it is matched with `:has()` instead of a descendant selector.

   Breakpoints
   -----------
   Desktop : 1025px and up
   Tablet  : 1024px and below  - same presentation as mobile, 3 cards per row
             820px and below   - same, 2 cards per row
   Mobile  : 600px and below   - 1 card per row (rest handled by style.css)
   ========================================================================== */

body:has(.page-templates-frameworks) .site-wrapper {
   background: #f9f8f5 !important;
}

.page-templates-frameworks.site-main {
   max-width: 100% !important;
}

.title-padding {
   padding-bottom: 16px !important;
   padding-right: 4px !important;
   padding-left: 16px !important;
   margin-left: -12px !important;
}

/* ==========================================================================
   Loading state - results grid
   ========================================================================== */

.page-templates-frameworks .product-case-wrap {
   position: relative;
   min-height: 240px;
}

.page-templates-frameworks .product-case-wrap .loader {
   position: absolute;
   top: 40px;
   left: 0;
   right: 0;
   margin: 0 auto;
   z-index: 5;
}

.page-templates-frameworks .product-case-wrap.is-loading .product__case {
   opacity: 0.35;
   pointer-events: none;
   transition: opacity 0.15s ease;
}

/* ==========================================================================
   Below 1025px - mirror the mobile layout
   --------------------------------------------------------------------------
   style.css switches this page over to its mobile presentation at 500px/600px
   (desktop sidebar out, mobile filter + sort buttons in, featured card
   stacked). Everything below repeats that switch from 1024px down so tablets
   get the mobile treatment instead of the squeezed desktop one. Only the
   results grid differs from mobile - see the column counts at the bottom.

   The mobile filter/sort modals sit outside <main>, so they are reached with
   `body:has(...)` rather than a descendant selector.
   ========================================================================== */

@media (max-width: 1024px) {
   /* --- desktop chrome out --- */
   .page-templates-frameworks .filter-content {
      background: unset;
   }

   .page-templates-frameworks .case-filter-base {
      display: none;
   }

   .page-templates-frameworks .post-panel-container {
      border-top: unset;
   }

   .page-templates-frameworks .post-filter__panel {
      display: none;
   }

   .page-templates-frameworks .case__group,
   .page-templates-frameworks .case__group.sidebar-opened {
      width: 100% !important;
      padding: 24px 0px 0px 0px !important;
   }

   .page-templates-frameworks .sort-selector {
      display: none;
   }

   /* --- mobile filter / sort controls in --- */
   .page-templates-frameworks .case__group__title {
      margin-bottom: 16px;
   }

   .page-templates-frameworks .case__group__title h5 {
      margin-top: 0;
      margin-bottom: 0;
   }

   .page-templates-frameworks .case__group__title .case__filter-tag {
      display: block;
      align-items: center;
   }

   .page-templates-frameworks .case__group__title .case__filter-tag:hover {
      text-decoration: none;
   }

   .page-templates-frameworks .case__group__title .case__filter-tag .txt {
      font-family: Poppins !important;
      font-size: 14px;
      font-weight: 400;
      line-height: 17px;
      letter-spacing: 0em;
   }

   .page-templates-frameworks .mobile-filter {
      display: flex;
      margin-bottom: 24px;
      justify-content: space-between;
   }

   .page-templates-frameworks .mobile-filter .filter {
      font-family: Poppins, sans-serif !important;
      font-size: 14px;
      font-weight: 400;
      line-height: 17px;
      letter-spacing: 0em;
   }

   /* --- filter / sort modals (siblings of the page root) --- */
   body:has(.page-templates-frameworks) .mobile-filter-modal,
   body:has(.page-templates-frameworks) .mobile-sort-modal {
      display: block;
   }

   body:has(.page-templates-frameworks) .mobile-sort-modal h5 {
      margin-top: 0;
   }

   body:has(.page-templates-frameworks)
      .post-filter-option-mobile
      .filter-option-container {
      max-height: 512px;
      overflow-y: auto;
      height: auto;
      display: block;
   }

   body:has(.page-templates-frameworks)
      .post-filter-option-mobile
      .post-filter-title {
      margin-bottom: 16px !important;
   }

   /* --- featured slider: stacked card, like mobile --- */
   .page-templates-frameworks .product__case__featured .product__case__column .product-sq {
      flex-direction: column;
   }

   .page-templates-frameworks
      .product__case__featured
      .product__case__column
      .product-sq
      .product-sq__image {
      width: 100%;
   }

   .page-templates-frameworks
      .product__case__featured
      .product__case__column
      .product-sq
      .product-sq__content {
      width: 100%;
      height: 100%;
   }

   .page-templates-frameworks .product__case__featured .product__case__column img {
      width: 100%;
      height: auto;
      border-radius: 12px 12px 0px 0px;
   }

   .page-templates-frameworks .product__case__featured .dateTime {
      margin-top: auto;
   }

   /* --- results grid: 3 per row --- */
   .page-templates-frameworks .product__case,
   .page-templates-frameworks .product__case.w-full {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Results grid - 2 per row */
@media (max-width: 820px) {
   .page-templates-frameworks .product__case,
   .page-templates-frameworks .product__case.w-full {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Results grid - 1 per row, matching the existing mobile layout */
@media (max-width: 600px) {
   .page-templates-frameworks .product__case,
   .page-templates-frameworks .product__case.w-full {
      grid-template-columns: repeat(1, 1fr);
   }
}