/* Clasitrónicos production — responsive columns V9
   -------------------------------------------------
   Ordinary classified cards:
     900px and wider : user-selectable 3 or 4 columns
     640px–899px     : automatic compact 3 columns
     421px–639px     : automatic compact 2 columns
     420px and below : 1 horizontal classified card

   The paid-advertiser panel always has the same outer width as the ordinary
   listing grid. JavaScript shows 2, 3, or 4 banners to match the active
   classified layout; one-column phones retain two compact banners. */

/* -------------------------------------------------------------------------
   Paid banners: responsive count inside a grid-width panel
   ------------------------------------------------------------------------- */
.paid-ads {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.paid-ads > span {
  box-sizing: border-box;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
}

/* Two columns are a safe pre-JavaScript fallback. The script replaces this
   with 2, 3, or 4 exact-width columns after measuring the listing grid. */
.paid-ads-images {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  column-gap: 12px;
  row-gap: 0;
}

.paid-ad,
.paid-ad:nth-child(2n + 1),
.paid-ad:nth-child(2n),
.image.placeholder,
.image.placeholder:nth-child(2),
.image.placeholder:nth-child(3),
.image.placeholder:nth-child(4) {
  box-sizing: border-box;
  min-width: 0 !important;
  margin: 0 !important;
  aspect-ratio: 16 / 10;
  min-height: 0 !important;
  max-height: none !important;
}

.paid-ad img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   Desktop selector
   ------------------------------------------------------------------------- */
@media only screen and (min-width: 900px) {
  .change-columns {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 6px;
    left: 10px !important;
    top: 210px !important;
    padding: 7px !important;
    margin-left: 0 !important;
    border: 1px solid #d8e2e3;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.16) !important;
  }

  .change-columns button,
  .change-columns button:first-child {
    box-sizing: border-box;
    min-width: 82px;
    margin: 0 !important;
    padding: 6px 8px;
    border: 1px solid #cfd9db !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #445154 !important;
    font: 600 11px/1.2 Montserrat, Arial, sans-serif;
    white-space: nowrap;
  }

  .change-columns button:hover {
    border-color: #147d7e !important;
    color: #147d7e !important;
  }

  .change-columns button.selected {
    border: 1px solid #147d7e !important;
    background: #147d7e !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------
   Remove legacy line-break elements between cards. These are harmless in the
   old block layout but can become flex items in a responsive row.
   ------------------------------------------------------------------------- */
.ads > br {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Explicitly restore the wrapping flex row below the legacy 700px breakpoint.
   listado.css only turns .ads into a flex container at 700px and wider, while
   the two-column V7 rules changed card widths without changing the parent.
   The result was two half-width cards stacked as one visible column.
   ------------------------------------------------------------------------- */
@media only screen and (min-width: 421px) and (max-width: 899px) {
  .ads {
    box-sizing: border-box;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
  }
}

/* -------------------------------------------------------------------------
   Vertical listing-card mode at 421px and wider
   ------------------------------------------------------------------------- */
@media only screen and (min-width: 421px) {
  .ads > .ad-listing.not-featured:not(.googleAd) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) > .ad-image {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) > .info {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
  }
}

/* Compact laptop / tablet: three columns down to 640px. */
@media only screen and (min-width: 640px) and (max-width: 899px) {
  .change-columns {
    display: none !important;
  }

  .ads {
    justify-content: flex-start !important;
  }

  /* !important is required to override listado-modern-v1.css, which forces
     one-column width below 700px. JavaScript later supplies exact pixel sizes. */
  .ads > .ad-listing.not-featured:not(.googleAd) {
    box-sizing: border-box;
    width: calc((100% - 36px) / 3) !important;
    max-width: 230px !important;
  }
}

/* Narrow tablet / large phone: two compact columns. */
@media only screen and (min-width: 421px) and (max-width: 639px) {
  .change-columns {
    display: none !important;
  }

  .ads {
    justify-content: flex-start !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) {
    box-sizing: border-box;
    width: calc((100% - 18px) / 2) !important;
    max-width: 230px !important;
  }
}

/* -------------------------------------------------------------------------
   Small phone: one horizontal card; photo pane is exactly 50% of card width
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) {
  .change-columns {
    display: none !important;
  }

  .ads {
    box-sizing: border-box;
    justify-content: center !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    width: 100% !important;
    max-width: 500px;
    aspect-ratio: 2 / 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) > .ad-image {
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    border-right: 1px solid rgba(28, 43, 41, 0.12);
    border-bottom: 0 !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) > .info {
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 9px 10px !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) .title,
  .ads > .ad-listing.not-featured:not(.googleAd) .title a {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) .keywords {
    max-height: 24px;
    overflow: hidden;
  }

  .paid-ads-images {
    column-gap: 8px;
  }
}


/* V7 resize stability: exact dimensions are supplied by JavaScript after each
   responsive layout pass. Avoid legacy width transitions during that pass. */
.ads,
.paid-ads,
.paid-ads-images {
  transition: none !important;
}


/* V9: remove the 7px mobile side padding inherited from
   listado-modern-v1.css. With border-box sizing that padding reduced the
   two-column row's content width and forced the second card to wrap. */
@media only screen and (min-width: 421px) and (max-width: 899px) {
  .ads {
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ads > .ad-listing.not-featured:not(.googleAd) {
    min-width: 0 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}