/* ====== GRID + FILTER (cars-grid variant) ====== */

/* Keep the theme from hiding tab content */
.our-taxi-section .tab-content,
.our-taxis-section .tab-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Filter row remains clickable and in place */
.our-taxi-section .main-tab.wp-block-buttons,
.our-taxis-section .main-tab.wp-block-buttons {
  position: relative;
  z-index: 5;
  margin: 12px 0 16px;
  pointer-events: auto;
}
.our-taxi-section .main-tab.wp-block-buttons .wp-block-button__link,
.our-taxis-section .main-tab.wp-block-buttons .wp-block-button__link {
  pointer-events: auto;
}

/* --- The real grid --- */
/* 1) Apply to the big Columns wrapper you tagged as `cars-grid` */
.cars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* 2) Flatten the inner “row” wrappers so their children become grid items */
.cars-grid > .wp-block-columns {
  display: contents !important;   /* critical: turns rows into pass-throughs */
}

/* 3) Each actual car card is a wp-block-column under a row */
.cars-grid > .wp-block-columns > .wp-block-column {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Hide items by filter */
.cars-grid > .wp-block-columns > .wp-block-column.is-hidden {
  display: none !important;
}

/* Normalise image area so all cards align nicely */
.cars-grid figure {
  width: 100%;
  aspect-ratio: 16 / 9;           /* adjust if you want a taller/shorter box */
  overflow: hidden;
  background: #fff;
  margin: 0 0 12px 0;
}
.cars-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* fit inside the box without cropping */
  display: block;
}

/* Active filter styling (optional) */
.filter-btn.is-active .wp-block-button__link,
.wp-block-button.is-active .wp-block-button__link {
  background: var(--wp--preset--color--primary, #000) !important;
  color: var(--wp--preset--color--secondary, #fff) !important;
}

/* Remove Gutenberg button arrows */
.wp-block-button__link::after,
.wp-element-button::after { content: none !important; display: none !important; }
.wp-block-button__link svg,
.wp-element-button svg { display: none !important; }

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .cars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 680px) {
  .cars-grid { grid-template-columns: 1fr; gap: 18px; }
}







/* Footer: tidy mobile layout & left alignment */
@media (max-width: 782px) {
  /* Use your theme's footer wrapper if needed: .site-footer, .footer, etc. */
  footer,
  .site-footer,
  .wp-block-footer,
  .wp-block-group.footer {
    text-align: left !important;
  }

  /* Make columns stack cleanly on mobile */
  footer .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;                 /* space between stacked items */
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* Each column takes full width on phones */
  footer .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* If the theme forces centered text with this class, override it */
  footer .has-text-align-center,
  footer [style*="text-align:center"] {
    text-align: left !important;
  }

  /* Buttons/links inside footer should align left too */
  footer .wp-block-buttons {
    justify-content: flex-start !important;
  }
}