/* ============================================================
   CSS Custom Properties  (from Figma design tokens)
   ============================================================ */
:root {
  --color-primary:       #0077D9;
  --color-text-dark:     #333333;
  --color-text-mid:      #666666;
  --color-header-bg:     #F2F2F2;
  --color-white:         #FFFFFF;
  --color-border:        #333333;

  --font-family:         var(--chevysans-regular), sans-serif;

  /* Font weights mapped from Figma styles */
  --fw-regular:  400;
  --fw-demi:     600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  --page-max-width: 1440px;
  --page-content-width: 1100px;   /* 170px left + content + right margins */
  --page-side-padding: 170px;
}

/* ============================================================
   Reset / Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-family);
  color: var(--color-text-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { font-family: var(--font-family); border: none; background: none; cursor: pointer; }
img { display: block; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-model-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0px;
}

.model-year {
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  color: var(--color-text-dark);
  line-height: 1;
  display: block;
  font-family: var( --chevysans-extrabold);
}

.model-name {
  font-size: 57px;
  font-weight: var(--fw-black);
  color: var(--color-text-dark);
  line-height: 1;
  letter-spacing: 0;
}

.model-name {
    margin: 5px -2px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--fw-demi);
  border-radius: 8px;
  padding: 14px 24px;
  align-items: center;
  line-height: 1;
  height: 47px;
  min-width: 230px;
  white-space: nowrap;
  transition: background 0.2s;
}

.search-btn {
  margin-top:10px;
  font-family: var(--chevysans-demi);
}

.column.medium-4.video {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.column.medium-4.video:first-child {
    padding-left: 0px;
}

.column.medium-4.video:last-child {
    padding-right: 0px;
}

.btn-primary:hover { background: #005faa; }

/* ============================================================
   VIDEO STRIP (thumbnails)
   ============================================================ */
/* First thumb has no play overlay (active / currently playing) */
.secondary-videos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.video .activeVideoButton .bg-img {
  height: 100px;
  object-fit: cover;
}

.thumb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.thumb-label {
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--color-text-dark);
}

.video .activeVideoButton .thumb-label { color: var(--color-primary); }

.thumb-duration {
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--color-text-dark);
}

/* --- Action Buttons --- */
.action-btn-icon {
  flex-shrink: 0;
}

.footer-cta-buttons .medium-3.column-widgets::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;
  text-wrap: wrap;
  margin: 11px;
  padding: 15px;
}

.footer-cta-buttons .medium-3.column-widgets .footer-title-header::after {
  object-fit: contain;
  vertical-align: sub;
  background-image: url(./../../../files/images/footer-arrow.png);
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
  margin-left: 5px;
}

.footer-cta-buttons .medium-3.column-widgets:hover .footer-title-header::after {
  background-image: url('./../../../files/images/footer-arrow-white.png');
  background-repeat: no-repeat;
}

.footer-cta-buttons .trade-section::before {
  object-fit: contain;    
  width: 30px;
  content:'';
  background-image: url('./../../../files/images/Trade.svg');
  background-repeat: no-repeat;
}
.footer-cta-buttons .trade-section:hover::before {
  content:'';
  background-image: url('./../../../files/images/Trade-white.svg');
  background-repeat: no-repeat;
}

.footer-cta-buttons .service-section::before {
  object-fit: contain;    
  width: 30px;
  content:'';
  background-image: url('./../../../files/images/Schedule.svg');
  background-repeat: no-repeat;
}
.footer-cta-buttons .service-section:hover::before {
  content:'';
  background-image: url('./../../../files/images/Schedule-white.svg');
  background-repeat: no-repeat;
}

.footer-cta-buttons .contact-section::before {
  object-fit: contain;    
  width: 30px;
  content:'';
  background-image: url('./../../../files/images/Contact.svg');
  background-repeat: no-repeat;
}
.footer-cta-buttons .contact-section:hover::before {
  content:'';
  background-image: url('./../../../files/images/Contact-white.svg');
  background-repeat: no-repeat;
}
/* ============================================================
   RESPONSIVE – scale down gracefully below 1440px
   ============================================================ */
@media (min-width: 768px) {
 
}
@media (max-width: 1300px) {
  .model-name { font-size: 57px; }
}
@media (min-width: 1025px) {
  
  #playerContainerUwm #bigPlayUwm {
    width: 142px !important;
    border-radius: 10px;
    height: 132px !important;
}
 .column { padding: 0px;}
}

@media (min-width: 768px) and (max-width: 1024px) {
  .dealer-header .header-left h2 {
    font-size: 26px;
  }
  .secondary-videos, .footer {
    padding: 0 0.625rem;
  }
  p.footer-title-header {
    font-size: 13px;
  }
  .footer-cta-buttons .medium-3.column-widgets .footer-title-header::after{
    display:none;
  }
}
@media (max-width: 1024px) {
  .model-name { font-size: 40px; }
   #playerContainerUwm #bigPlayUwm {
    width: 55px !important;
    border-radius: 5px;
    height: 45px !important;
}
}

@media (max-width: 768px) {
  .model-name  { font-size: 32px; }
  .icon-circle {
    width: 45px;
    height: 45px;
  }
  .model-year{
    font-size: 18px;
  }
  .model-name{
    font-size: 40px;
  }
  .hero-model-info{
    padding: 15px 0px 0px 15px;
  }
  .search-btn{
    width: 85%;
    margin: auto;
    display: flex;
    margin-top: 40px;
  }
  .thumb-label, .thumb-duration {
    font-size: 13px;
  }
  .secondary-videos {
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 10px;
  }
}