/* ============================================
   Mobile Fix - Override Webflow display:none
   Laat content zien op tablet & mobiel
   ============================================ */

/* --- Tablet landscape & kleiner (max-width: 991px) --- */
@media screen and (max-width: 991px) {

  /* Hoofdsecties forceren zichtbaar */
  .section-22,
  .section-23,
  .section-24,
  .section-25,
  .section-26,
  .section-22-2,
  .section-23-2,
  .section-24-2,
  .section-25-2,
  .section-26-2,
  .container-24,
  .container-25,
  .container-25-2,
  .container-27,
  .container-28 {
    display: block !important;
    height: auto !important;
  }

  .revolute-studio-creatieve-slider {
    display: block !important;
    height: auto !important;
  }

  .main {
    display: block !important;
    height: auto !important;
  }

  .filter-section {
    display: block !important;
  }

  /* Filter wrapper zichtbaar */
  .filters-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Desktop "PORTFOLIO" heading verbergen, mobiel label tonen */
  .portfolio-heading {
    display: none !important;
  }

  .portfolio-heading-mob {
    display: block !important;
  }

  /* Mobiele bottom menu tonen, desktop menu verbergen */
  .mobmenu {
    display: grid !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cr-achtergrond, #1a1a1a);
    z-index: 1000;
    padding: 8px 0;
    border-top: 1px solid #333;
    grid-template-columns: repeat(5, 1fr);
  }

  .cr_menu {
    display: none !important;
  }

  /* Desktop footer verbergen op tablet/mobiel */
  .cr_footer_desktop {
    display: none !important;
  }

  /* Portfolio grid: 2 kolommen op tablet */
  #portfolio-grid,
  .port-collection-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  /* Container padding */
  .container-24,
  .container-25,
  .container-27,
  .container-28 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Filter buttons wrappen */
  .dicipline-fltr {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .sort-button {
    margin-bottom: 5px !important;
  }

  /* Body onderaan ruimte voor mobmenu */
  body {
    padding-bottom: 70px !important;
  }

  /* Typography */
  .heading-14 {
    font-size: 48px !important;
  }
}

/* --- Mobiel landscape & kleiner (max-width: 767px) --- */
@media screen and (max-width: 767px) {

  .section-22,
  .section-23,
  .section-24,
  .section-25,
  .section-26,
  .section-22-2,
  .section-23-2,
  .section-24-2,
  .section-25-2,
  .section-26-2 {
    display: block !important;
    height: auto !important;
  }

  .revolute-studio-creatieve-slider {
    display: block !important;
    height: auto !important;
  }

  .main {
    display: block !important;
    height: auto !important;
  }

  .filter-section {
    display: block !important;
  }

  .filters-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  .portfolio-heading {
    display: none !important;
  }

  .portfolio-heading-mob {
    display: block !important;
  }

  /* Portfolio grid: 1 kolom op mobiel */
  #portfolio-grid,
  .port-collection-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Filter compacter */
  .text-block-41 {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  .sort-button {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin: 2px !important;
  }

  .heading-14 {
    font-size: 42px !important;
  }

  /* Filter wrapper layout */
  .filters-wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  .dicipline-fltr {
    order: 2;
    margin-top: 15px !important;
  }

  .portfolio-heading-mob {
    order: 1;
  }
}

/* --- Mobiel portrait (max-width: 479px) --- */
@media screen and (max-width: 479px) {

  .section-22,
  .section-23,
  .section-24,
  .section-25,
  .section-26,
  .section-22-2,
  .section-23-2,
  .section-24-2,
  .section-25-2,
  .section-26-2,
  .revolute-studio-creatieve-slider,
  .main {
    display: block !important;
    height: auto !important;
  }

  .filter-section,
  .filters-wrapper {
    display: block !important;
  }

  .portfolio-heading {
    display: none !important;
  }

  /* Portfolio grid: 1 kolom met minder gap */
  #portfolio-grid,
  .port-collection-list {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .heading-14 {
    font-size: 36px !important;
  }

  /* Container items compacter */
  .containes-port {
    padding: 15px !important;
    min-height: 250px !important;
  }

  .containes-port img {
    height: 160px !important;
  }
}