/* =====================================================
   RESPONSIVE — twomanybikes theme
   Desktop-first. Breakpoints:
     ≤ 1024px  small desktop / large tablet
     ≤ 900px   tablet
     ≤ 767px   mobile
     ≤ 575px   small mobile
   ===================================================== */

#block-responsivemenumobileicon {
  display: none;
}

/* ---- ≤ 1024px: small desktop — switch to hamburger ---- */
@media (max-width: 1024px) {
  #block-responsivemenumobileicon {
    display: block;
  }
  #block-twomanybikes-main-menu {
    display: none;
  }

  .container-main-content {
    width: 96%;
  }

  header div.layout-content {
    width: 100%;
    max-width: none;
  }

  /* Compact header: flex row so hamburger + logo sit side by side */
  header .layout-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
  }
  header img {
    max-height: 54px;
    max-width: 90px;
    width: auto;
    margin-left: 0;
  }
}

/* ---- Filter toggle button (hidden on desktop) ---- */
.filter-toggle-btn {
  display: none;
}
@media (max-width: 900px) {
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 4px;
    background: #FFE800;
    color: #000;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .filter-toggle-btn .filter-toggle-icon {
    font-style: normal;
    transition: transform 0.2s ease;
  }
  .filter-toggle-btn[aria-expanded="true"] .filter-toggle-icon {
    transform: rotate(180deg);
  }
}

/* ---- ≤ 900px: tablet ---- */
@media (max-width: 900px) {
  .container-main-content {
    width: 100%;
  }

  /* Related articles: 2 columns on tablet */
  #block-relatedarticlesoverview-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Article listing filter stacks above grid */
  #views-exposed-form-grid-overview-block-1 {
    width: 100%;
    float: none;
    clear: both;
  }

  /* Article listing: 2 columns at tablet */
  .results-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Video section: 2 columns on tablet */
  .video_base {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Video section: 4 columns collapses to 2 on small desktop/tablet */
  #block-homepageyoutubeoverview .video_base {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Collapse grid to single column: sidebar stacks below main */
  main div.layout-content {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  main div.layout-content-main {
    grid-column: 1;
    grid-row: 1;
  }
  main div.layout-content-sidebar {
    grid-column: 1;
    grid-row: 2;
  }
  main div.layout-content > .layout-full-width-content {
    grid-column: 1;
  }

  /* Three-column teasers drop to two */
  .grid_row.threecolumn .teaser-container {
    width: 49.5%;
  }

  /* Make paragraphs stack */
  .paragraph {
    display: block;
  }
  .paragraph--type--text-and-image .text-image--image,
  .paragraph--type--text-and-image .text-image--text {
    width: 100%;
    float: none;
    clear: both;
  }
  .Left.paragraph--type--text-and-image .text-image--text,
  .Right.paragraph--type--text-and-image .text-image--text {
    padding-left: 0;
    padding-right: 0;
  }

  /* YouTube embed */
  .youtube-embed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ---- ≤ 767px: mobile ---- */
@media (max-width: 767px) {
  body {
    font-size: 16px;
    overflow-x: hidden;
  }

  /* Prevent any overflowing child from creating a horizontal scrollbar */
  .container-main-content {
    overflow-x: clip;
  }

  /* Beat the UA stylesheet cols/size intrinsic minimum on form fields */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  main div.layout-content-main {
    grid-column: 1;
  }

  main div.layout-content-sidebar {
    display: none;
  }

  /* All teaser rows go single column */
  .grid_row.threecolumn .teaser-container,
  .grid_row.twocolumn .teaser-container {
    width: 100%;
    min-width: auto;
    margin: 0 auto;
  }

  /* Videos */
  .video_description,
  .video_image_container {
    float: none;
    clear: both;
    width: 100%;
  }

  /* Article filter sidebar */
  #views-exposed-form-grid-overview-block-1 {
    width: 100%;
    float: none;
    clear: both;
  }
  #views-exposed-form-grid-overview-block-1 #edit-keys {
    display: block;
  }
  #views-exposed-form-grid-overview-block-1 > label {
    display: block;
  }
  #views-exposed-form-grid-overview-block-1 .js-form-item {
    display: block;
  }

  .views-view-grid.horizontal.cols-3.clearfix {
    width: 100%;
    float: none;
    clear: both;
  }

  .content-overview {
    width: 100%;
  }
  .content-overview .teaser-container .teaser-image {
    width: 100%;
  }

  /* Paragraph columns stack */
  .paragraph--type-_-column > div {
    width: 100%;
    float: none;
    min-width: auto;
  }
  .left-column,
  .right-column {
    padding: 10px 0;
  }
}

/* ---- ≤ 575px: small mobile ---- */
@media (max-width: 575px) {
  main div.layout-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Related articles: single column on small mobile */
  #block-relatedarticlesoverview-2 {
    grid-template-columns: 1fr;
  }

  /* Article listing: single column */
  .results-wrapper {
    grid-template-columns: 1fr;
  }

  /* Video section: single column on small mobile */
  .video_base {
    grid-template-columns: 1fr;
  }

  /* Teaser overlay: clamp title to 3 lines, tighten font */
  .grid_row .teaser-container .teaser-image .teaser-cta .teaser-cta-text,
  .grid_row .teaser-container .teaser-image .teaser-cta span {
    font-size: 11px;
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .list-teaser-container .list-teaser-cta h3 {
    color: black;
    margin-top: 0;
  }

  .js-form-wrapper {
    padding: 10px;
  }

  /* Results grid goes single column */
  .results-wrapper {
    grid-template-columns: 1fr;
  }
}