/* Release 3B5: uniform mobile logo size on the other updated inner pages.
   The complete 3B4 sizing below is retained for desktop and tablet.
   Only the final mobile override is new. Motoras/getadnew.cgi is not replaced
   and continues using its already-working 3B4 stylesheet. */

/* Clasitrónicos branding 3B4 — shared sizing for the updated inner pages.
   Based on successful 3B1 responsive images and the 3B3 category sizing.
   Desktop >=1100px: +20% from each pre-size-update header, NOT another +20%
   on Motoras. Mobile <=699px: visible image width/height x0.8. Tablet unchanged.
   index.htm, underlying application styles and logo artwork are untouched. */

/* The PICTURE element selects the artwork; CSS only sizes it. */
html body picture.clasi-picture-3b1 {
  display: block !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}
html body picture.clasi-picture-3b1 > img.clasi-logo-3b1 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body a.clasi-brand-novo,
html body .menu a.logo,
html body .site-header a.logo {
  display: block !important;
  min-width: 0 !important;
  max-width: 100%;
  height: auto !important;
  line-height: 0;
  text-decoration: none;
}
a.clasi-brand-novo { width: 300px; }

/* Disable both the 3B background and older duplicate category icon strips. */
html body a.clasi-brand-novo::before,
html body a.clasi-brand-novo::after,
html body .menu a.logo::before,
html body .menu a.logo::after,
html body .site-header a.logo::before,
html body .site-header a.logo::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
html body .menu a.logo > img[src*="icon-strip"],
html body .menu a.logo > img[src*="icon-bar"],
html body .site-header a.logo > img[src*="icon-strip"],
html body .site-header a.logo > img[src*="icon-bar"] {
  display: none !important;
}
a.clasi-brand-novo:focus-visible,
.menu a.logo:focus-visible,
.site-header a.logo:focus-visible {
  outline: 3px solid #336688;
  outline-offset: 4px;
}

.header-inner > a.brand.clasi-brand-novo,
.rf-header-inner > a.rf-brand.clasi-brand-novo,
.form-header-original .wordmark-original.clasi-brand-novo {
  width: 272px;
  flex: 0 1 272px;
  gap: 0;
}
.header-main > a.brand.clasi-brand-novo {
  width: 300px;
  flex: 0 1 300px;
}
a.detail-logo.clasi-brand-novo,
a.premium-brand.clasi-brand-novo { width: 100%; }
a.premium-footer-brand.clasi-brand-novo { width: 170px; }
.detail-header-inner,
.premium-header-inner { padding-top: 8px; padding-bottom: 8px; }

/* Category headers: handle the modern header even without a .menu class. */
html body .site-header .logo-publish-container a.logo {
  width: 100% !important;
  max-width: 100% !important;
}
html body .menu:not(.site-header) .logo-publish-container a.logo {
  width: 176px;
  max-width: 100%;
  margin-inline: auto;
}
.site-header-inner { padding-top: 7px; padding-bottom: 7px; }

/* Preserve the original phone/tablet boundary: 700 CSS pixels.
   Device labels are layout widths, not operating-system detection. */
@media (max-width: 699px) {
  a.clasi-brand-novo { width: 188px; max-width: 62vw; }
  .header-inner > a.brand.clasi-brand-novo,
  .rf-header-inner > a.rf-brand.clasi-brand-novo,
  .form-header-original .wordmark-original.clasi-brand-novo {
    flex-basis: 188px;
    width: 188px;
    max-width: 62vw;
  }
  .header-main > a.brand.clasi-brand-novo {
    width: 188px;
    flex: 0 1 188px;
    max-width: 62vw;
  }
  a.detail-logo.clasi-brand-novo { width: 170px; }
  a.premium-brand.clasi-brand-novo { width: 100%; }
  a.premium-footer-brand.clasi-brand-novo { width: 146px; }
  html body .site-header .logo-publish-container a.logo {
    max-width: 158px !important;
    margin-inline: auto;
  }
  html body .menu:not(.site-header) .logo-publish-container a.logo {
    width: 100px; /* 58px tall: fits the legacy fixed 68px row. */
    margin-inline: auto;
  }
}

/* 3B3_CATEGORY_LOGO_SIZE_120 — new URL; category pages only.
   Desktop target is 211.2 CSS pixels: 1.2 x the previous 176px slot.
   No transform/zoom: the grid reserves space so search does not overlap.
   Tablet and phone sizing and image selection remain the 3B1 values. */
:root { --clasi-category-brand-release: 3B4; }
@media only screen and (min-width: 1100px) {
  html body .site-header .site-header-inner {
    grid-template-columns:
      211.2px minmax(220px, 1fr) auto auto auto auto auto !important;
  }
  html body .site-header .site-header-inner > .logo-publish-container {
    box-sizing: border-box !important;
    width: 211.2px !important;
    min-width: 211.2px !important;
    max-width: 211.2px !important;
  }
  html body .site-header .site-header-inner .logo-publish-container a.logo,
  html body .site-header .site-header-inner .logo-publish-container picture.clasi-picture-3b1 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* 3B4_SHARED_LOGO_SIZING. The category desktop block above is retained.
   Explicit flex/grid space prevents the larger artwork covering controls. */
:root {
  --clasi-brand-release: 3B5;
  --clasi-brand-layout: tablet;
}
@media only screen and (min-width: 1100px) {
  :root { --clasi-brand-layout: desktop; }
  /* Simple photo notice, payment and confirmation headers: 300 -> 360. */
  html body a.clasi-brand-novo {
    width: 360px;
    flex: 0 0 360px;
    --clasi-brand-target-width: 360px;
  }
  /* Account, login, registration, recovery, and Publicar: 272 -> 326.4. */
  html body .header-inner > a.brand.clasi-brand-novo,
  html body .rf-header-inner > a.rf-brand.clasi-brand-novo,
  html body .form-header-original .wordmark-original.clasi-brand-novo {
    width: 326.4px;
    flex: 0 0 326.4px;
    --clasi-brand-target-width: 326.4px;
  }
  /* Autos: 300 -> 360, with an actual reserved flex slot. */
  html body .header-main > a.brand.clasi-brand-novo {
    width: 360px;
    flex: 0 0 360px;
    --clasi-brand-target-width: 360px;
  }
  /* Ad detail: the old logo was constrained by a 166px grid column. */
  html body .detail-header-inner {
    grid-template-columns: 199.2px minmax(240px, 1fr) auto 104px;
  }
  html body a.detail-logo.clasi-brand-novo {
    width: 100%;
    --clasi-brand-target-width: 199.2px;
  }
  /* Premium header: 184 -> 220.8. Keep the search and navigation tracks. */
  html body .premium-header-inner {
    grid-template-columns: 220.8px minmax(220px, 1fr) auto;
  }
  html body a.premium-brand.clasi-brand-novo {
    width: 100%;
    --clasi-brand-target-width: 220.8px;
  }
  /* The existing footer image was limited to its 150px grid track. */
  html body .premium-footer-inner {
    grid-template-columns: 180px 1fr auto;
  }
  html body a.premium-footer-brand.clasi-brand-novo {
    width: 180px;
    flex: 0 0 180px;
    --clasi-brand-target-width: 180px;
  }
  html body .site-header .site-header-inner .logo-publish-container a.logo {
    --clasi-brand-target-width: 211.2px;
  }
  /* The legacy results fallback, when used instead of the modern header. */
  html body .menu:not(.site-header) .logo-publish-container a.logo {
    width: 211.2px;
    --clasi-brand-target-width: 211.2px;
  }
}
@media only screen and (max-width: 699px) {
  :root { --clasi-brand-layout: mobile; }
  /* Scale the visible PICTURE within its existing link slot. This gives
     an exact 20% reduction even when a narrow header's flex/grid slot shrinks.
     Keep the full clickable link area and center the smaller image in it.
     The original PICTURE source still selects the approved tall artwork. */
  html body picture.clasi-picture-3b1 {
    width: 80% !important;
    margin-inline: auto !important;
  }
}


/* 3B5_UNIFORM_MOBILE_LOGO
   Match the existing modern category/Motoras logo, not 80% of each page's
   different link width. On an ordinary phone the target is 126.4px wide.
   The category has a 158px maximum logo slot; its image occupies 80% of it.
   On very narrow screens its grid leaves (viewport - 199px) for that slot,
   with a 102px minimum. Apply the same limits here:
     0.8 * clamp(102px, viewport - 199px, 158px).
   This preserves the existing Motoras size even at 320/340/350px widths.
   Link targets, header layout, artwork and desktop/tablet rules are unchanged.
   Scope to the converted non-category brand anchors; the old fixed-height
   category fallback and the working modern category renderer are untouched. */
@media only screen and (max-width: 699px) {
  :root {
    --clasi-mobile-logo-width: clamp(81.6px, calc(80vw - 159.2px), 126.4px);
  }
  html body a.clasi-brand-novo > picture.clasi-picture-3b1 {
    width: var(--clasi-mobile-logo-width) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}