/* home.css – homepage hero and cards */

/* Popup overlay and box styles */
.popup-overlay {
     position: fixed;
     inset: 0;
     background: var(popup-bg);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
}

.popup-box {
     background: var(--card, #fff);
     padding: 2rem;
     border-radius: 1rem;
     box-shadow: var(--shadow-1);
     max-width: 60%;
     text-align: left;
}

.popup-box ul {
     list-style-type: disc;
     padding-left: 2rem;
}

.hero {
     position: relative;
     isolation: isolate;
     min-height: 64dvh;
     display: grid;
     place-items: center;
     text-align: center;
     color: var(--text-inverse);
     background: url("../images/indexPage/default.jpg") center/cover no-repeat;
     border-radius: 0;
}

.hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, var(hero-bg-From), var(hero-bg-To) 70%);
     z-index: 0;
}

.hero-content {
     position: relative;
     z-index: 1;
     max-width: 70ch;
     padding: 16px;
}

.hero h2 {
     color: var(--text-inverse);
     margin: 0 0 10px;
}

.home-cards {
     display: grid;
     gap: 12px;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-card {
     background: var(--card, #fff);
     border: 1px solid var(--border, #e6e6ef);
     border-radius: 12px;
     box-shadow: var(--shadow-1);
     padding: 12px;
}

/* Inline welcome + rolling gallery */
.home-hero {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 16px;
     align-items: start;
}

.home-hero .welcome h2 {
     margin-bottom: 8px;
}

.home-hero .lead {
     font-size: 1.05rem;
}

.home-cta {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin: 6px 0 8px;
}

.quick-infos {
     display: flex;
     gap: 8px;
     align-items: center;
     color: var(--text-2);
     font-size: .95rem;
}

.roll-gallery {
     position: relative;
     width: 100%;
     max-width: 520px;
     margin-inline: auto;
}

.roll-gallery img {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     border-radius: 12px;
     box-shadow: var(--shadow-1, 0 6px 18px rgba(0, 0, 0, .15));
}

.roll-gallery .caption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 6px;
     padding: 6px 10px;
     color: var(--text-inverse);
     text-shadow: 0 1px 2px var(popup-bg);
     font-size: .95rem;
}

@media (max-width: 900px) {
     .home-hero {
          grid-template-columns: 1fr;
     }

     .roll-gallery {
          max-width: 100%;
     }
}

/* Highlights strip */
.home-highlights {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
     margin: 10px 0 6px;
}

.highlight {
     background: var(--surface-1);
     border: 1px solid var(--border, #e6e6ef);
     border-radius: 10px;
     padding: 10px;
     text-align: center;
     box-shadow: var(--shadow-1);
}

.highlight .h-num {
     font-weight: 800;
     font-size: 1.25rem;
}

.highlight .h-label {
     color: var(--text-2);
     font-size: .95rem;
}

@media (max-width: 900px) {
     .home-highlights {
          grid-template-columns: 1fr;
     }
}

/* Three feature tiles */
.home-sections {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
}

.tile {
     background: var(--surface-1);
     border: 1px solid var(--border, #e6e6ef);
     border-radius: 12px;
     padding: 12px;
     box-shadow: var(--shadow-1);
}

@media (max-width: 900px) {
     .home-sections {
          grid-template-columns: 1fr;
     }
}

/* Featured cars mini grid */
.mini-cards {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mini-card {
     display: flex;
     flex-direction: column;
     background: var(--surface-1);
     border: 1px solid var(--border, #e6e6ef);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: var(--shadow-1);
     transition: transform .2s ease, box-shadow .2s ease;
}

.mini-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-2, 0 10px 20px rgba(0, 0, 0, .12));
}

.mini-card img {
     width: 100%;
     aspect-ratio: 4/3;
     object-fit: cover;
}

.mini-card span {
     padding: 8px;
     font-weight: 600;
}

/* Partners strip */
.partners-strip {
     display: flex;
     gap: 18px;
     align-items: center;
     overflow: auto;
     padding: 8px 2px;
     margin-bottom: 4rem;
}

.partners-strip img {
     height: 80px;
     width: auto;
     border: 1px solid var(--border);
     mix-blend-mode: multiply;
     filter: grayscale(35%);
     opacity: .6;
     transition: filter .2s ease, opacity .2s ease;
}

.partners-strip img:hover {
     filter: none;
     opacity: 1;
}