/* *********************** */
/*       GLOBAL RESET      */
/* *********************** */

/* Apply border-box sizing to all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Root font size (desktop) */
html {
  font-size: 16px; /* 1rem = 16px */
  font-family: 'MyCustomFutura', sans-serif;
}

/* Body resets */
body {
  margin: 0;
  padding: 0;
  color: var(--black);
  overflow-x: hidden;
  user-select: none;

  min-height: 100vh;       /* full viewport height */
  display: flex;
  flex-direction: column;  /* stack header, main, footer */
}

main {
  flex: 1; /* grow to fill space, pushes footer down */
}

/* Mobile scaling */
@media (max-width: 64rem) {
  html { font-size: 14px; /* 1rem = 14px */ }
  #navList {
    font-size: 12px;
    gap: var(--sm)
  }
}

/* Mobile scaling */
@media (max-width: 48rem) {
  html { font-size: 14px; /* 1rem = 14px */ }
}

.mw-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 0.75rem; /* mobile default */
}

/* Tablet */
@media (min-width: 48rem) {
  .mw-container {
    padding: 0 1.5rem;
  }
}

/* Desktop */
@media (min-width: 80rem) {
  .mw-container {
    padding: 0;
  }
}

/* *********************** */
/*       GRID STYLING      */
/* *********************** */

/* Base grid styles */
.gr-b, .gr-c1, .gr-c2, .gr-c3, .gr-c4, .gr-c6, .gr-c8, .gr-full {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
}

/* Columns */
.gr-b    { --cols: minmax(0, 2fr) minmax(0, 1fr); }
.gr-c1   { --cols: 1fr; }
.gr-c2   { --cols: minmax(0, 1fr) minmax(0, 1fr); }
.gr-c3   { --cols: repeat(auto-fill, minmax(26rem, 1fr)); }
.gr-c4   { --cols: repeat(auto-fill, minmax(19.25rem, 1fr)); }
.gr-c6   { --cols: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.gr-c8   { --cols: repeat(auto-fill, minmax(9.125rem, 1fr)); }
.gr-full {
  grid-column: 1 / -1;
  display: block; /* override the grid display */
}

/* Tablet: switch to 1fr 1fr */
@media (max-width: 64rem) {
  .gr-b { --cols: 1fr 1fr; }
}

/* Mobile: collapse to 1 column */
@media (max-width: 48rem) {
  .gr-b,
  .gr-c2  { --cols: 1fr; }
}

/* Mobile: collapse extra small grids */
@media (max-width: 375px) {
  .gr-c6 { --cols: repeat(auto-fill, minmax(11.5rem, 1fr)); }
}

/* *********************** */
/*     COLUMN STYLING      */
/* *********************** */

/* Base column styles */
.col-2   { column-count: 2; }

/* Mobile: collapse to 1 column */
@media (max-width: 48rem) {
  .col-2 { column-count: 1; }
}

/* Two-column layout specifics */
.col-2 > div {
  break-inside: avoid;
  margin-bottom: var(--sm);
}

/* *********************** */
/*      GALLERY STYLING    */
/* *********************** */
.image-slider {
  transition: transform var(--trans-med) ease;
}

/* Base image styles */
.img-veh,
.img-thumb,
.img-art,
.img-grid,
.img-ban-50,
.img-ban-100 {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: bottom;
}

/* Thumbnail image styles */
.img-thumb {
  max-width: calc(
    (100% - ((var(--thumb-visible-count) - 1) * var(--xsm)))
    / var(--thumb-visible-count)
  );
  margin-top: 0.25rem;
}

/* Desktop aspect ratios */
.img-veh,
.img-thumb    { aspect-ratio: 3 / 2; }
.img-art      { aspect-ratio: 16 / 9; }
.img-ban-50   { height: calc(50vh - 175px); }
.img-ban-100  { height: calc(100vh - 175px); }
.img-map      { 
  height: calc(60vh - 175px); 
  min-height: 100%;
  width: 100%;
  object-fit: cover;
}
.img-grid     { 
  aspect-ratio: 8 / 3.15; 
  min-height: 100%;
}

/* Tablet aspect ratios */
@media (max-width: 65.2rem) {
  .img-grid   { aspect-ratio: 16 / 9; }
  .img-map    { height: calc(50vh - 175px); }
}

/* Mobile aspect ratios */
@media (max-width: 48rem) {
  .img-veh,
  .img-thumb,
  .img-grid { aspect-ratio: 4 / 3; }
  .img-ban-50,
  .img-map { height: calc(60vh - 175px); }
  #vehicleListings .img-veh {
    aspect-ratio: 3 / 2; 
  }
}

/* *********************** */
/*      RIBBON SETS        */
/* *********************** */
.ribbon {
  right: calc(-1.1 * var(--xlg));
  width: calc(4 * var(--xlg));
  line-height: var(--lg) !important;
  transform: rotate(45deg);
}

.ribbon.nuevo,
.ribbon.reservado  { background-color: var(--accent); }
.ribbon.vendido    { background-color: var(--dark-grey); }
.ribbon.disponible { display: none; }

.ribbon.discount,
.ribbon.article {
  transform: rotate(-45deg);
  left: calc(-1.1 * var(--xlg));
  right: auto;
}

.ribbon.discount { background-color: var(--accent); }
.ribbon.article { background-color: var(--dark-grey); }

/* *********************** */
/*      POPUP STYLING      */
/* *********************** */

#overlayNav,
#overlayPopup { z-index: 999; }

.popup-container {
  position: fixed;
  width: calc(100% - 1.5rem);
  max-width: 32.5rem;
  max-height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  overflow-y: auto;
}

#loanSummary > span {
  font-style: italic;
}

#loanSummary strong {
  font-weight: 700;
  font-style: normal;
}

/* *********************** */
/*       ANIMATIONS        */
/* *********************** */

.fade-in {
  opacity: 0;
  animation: fadeIn var(--trans-med) ease var(--trans-vfast) forwards;
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* *********************** */
/*   INTERACTIVE ELEMENTS  */
/* *********************** */

/* Base resets for buttons and links */
button {
  all: unset;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Shared interactive styles */
button, a,
input[type="checkbox"] + label,
input[type="radio"] + label {
  cursor: pointer;
  transition: color, transform, opacity var(--trans-vfast) ease;
}

/* Disabled buttons */
button:disabled {
  cursor: not-allowed;
  filter: grayscale(100%);
  opacity: 0.65;
}

/* Accent hover color */
.ie-ac:hover { color: var(--accent); }

.ie-ac:hover img {
  background-color: var(--accent);
  transition: background-color var(--trans-vfast) ease;
}

/* Blue hover for links */
.ie-bl:hover { color: var(--blue-dark); }

/* Opacity on hover (excluding disabled) */
.ie-op85:not(:disabled):hover { opacity: 0.85; }
.ie-op75:not(:disabled):hover { opacity: 0.75; }
.ie-op65:not(:disabled):hover { opacity: 0.65; }

/* Container shadow effect */
.ie-cont:hover {
  box-shadow:
    0 5px 15px 0 var(--medium-grey),
    0 0 2px 0 var(--darker-grey);
  transition: box-shadow var(--trans-vfast) ease;
}

/* Hover transform effect */
.ie-hu:hover {
  color: var(--darker-grey);
  transform: translateY(var(--xsm));
  transition: color, transform var(--trans-fast) ease;
}

/* *********************** */
/*    SCHEDULE STYLING     */
/* *********************** */

#contactHours strong,
#contactHoursFooter strong {
  display: inline-block;
  width: 4ch;
}

#contactHours strong {
  color: var(--darkist-grey);
}






/* *********************** */
/*    SWAPPING BULLET POINT FOR DASH    */
/* *********************** */
ul li::marker {
  content: "- ";
}


/* *********************** */
/*          BANNER         */
/* *********************** */
/* Mobile scaling */
@media (max-width: 48rem) {
  #bannerContainer .h1 {
    font-size: var(--fs-2);
  }
}



/* *********************** */
/*       TEXT CLAMPS       */
/* *********************** */

/* Single-line ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* *********************** */
/*    CUSTOMER REVIEWS     */
/* *********************** */
#googleReviews, #reviewWrapper {
  min-height: 18rem;
  padding-block: 2.5rem;
}