@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========== THEME / TOKENS (palette applied) ========== */
:root{
  /* first-color / bg */
  --bg:#233142;
  /* fourth-color / main text */
  --main:#e3e3e3;
  /* first-color reused for ink on light surfaces */
  --ink:#233142;
  /* third-color / accent */
  --accent:#f95959;
  /* lighter accent for secondary highlights */
  --accent-2:#ff9a9a;
  /* fourth-color reused for neutral borders on dark bg */
  --muted:#e3e3e3;
  /* darker neutral for borders */
  --muted-dark:#2b3a50;
  /* second-color / cards and elevated surfaces */
  --card:#455d7a;
  /* muted foreground text */
  --muted-foreground:#cfd5dc;
}
html,body{background:var(--bg);color:var(--main);}
.container{max-width:1200px;margin:0 auto;padding:0 1rem;}
.text-main{color:var(--main);}
.text-muted{color:color-mix(in oklab, var(--main) 55%, #808080);}
.bg-subtle{background:var(--bg);}
.border-muted{border-color:var(--muted);}
.h1{font-size:1.6rem;font-weight:800;margin:1rem 0 .5rem;}

/* ========== LINKS / BUTTONS ========== */
.link-accent{color:var(--accent);font-weight:600;}
.link-accent:hover{text-decoration:underline;}

.btn{background:#fff;color:#000;border:1px solid #e5e7eb;padding:.55rem .9rem;border-radius:.7rem;font-weight:700;}
.btn:hover{filter:brightness(1.02);}
.btn-primary,.btn--primary{
  background:var(--accent);
  color:#fff;
  border:1px solid color-mix(in oklab,var(--accent) 85%, #0000);
  padding:.625rem 1.1rem;border-radius:9999px;font-weight:700;
}
.btn-primary:hover,.btn--primary:hover{filter:brightness(1.05);}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid #ffffff99;padding:.6rem 1.1rem;border-radius:9999px;font-weight:700;}
/* Белая кнопка Reset по требованию */
.btn--ghost{background:#fff;color:#111;border:1px solid #ddd;border-radius:.6rem;font-weight:700;height:40px;padding:0 1rem;}
.btn--ghost:hover{background:#f5f5f5;}

/* ========== NAV ========== */
.main-nav .nav-link{color:#fff;font-weight:700;letter-spacing:.02em;font-size:1.05rem;}
@media (min-width:768px){.main-nav .nav-link{font-size:1.35rem;}}
.main-nav .nav-link:hover{color:#fff;opacity:.95;}

/* ========== HEADER / FOOTER ========== */
.site-header{
  position:sticky;top:0;z-index:9999;
  background:rgba(0,0,0,.85);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
  backdrop-filter:saturate(180%) blur(6px);
}
.footer-logo{height:56px;width:auto;}
.brand-logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}

/* ========== HERO ========== */
.hero-overlay{
  background:linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.5) 100%);
}
.hero-title{
  font-weight:900;line-height:1.05;
  font-size:clamp(34px,6vw,68px);
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero-content{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:100%;max-width:1200px;
}

/* ========== BENEFITS ========== */
.benefit{background:var(--card);color:#fff;border-radius:14px;padding:1.1rem 1.2rem;}
.benefit h3{font-weight:800;letter-spacing:.02em;margin-bottom:.25rem;font-size:clamp(1.1rem, .9rem + 1vw, 1.6rem);}
.benefit p{color:var(--main);font-size:1.05rem;}
.benefit-small{background:var(--bg);color:#fff;border-radius:14px;padding:1rem 1.1rem;}
.benefit-small h4{color:var(--accent-2);font-weight:800;letter-spacing:.02em;margin-bottom:.25rem;font-size:clamp(1rem, .8rem + .7vw, 1.35rem);}
.benefit-small p{color:var(--main);}

/* ========== SECTION TITLES ========== */
.section-title{font-weight:900;letter-spacing:.02em;font-size:clamp(1.3rem, 1rem + 1.2vw, 2rem);}

/* ========== CAROUSEL / SCROLL-SNAP ========== */
.car-track,.cars-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:4px;scroll-snap-type:x mandatory;}
.car-track>ul,.cars-track>ul{display:flex;gap:16px;min-width:100%;padding-right:8px;}
.car-card--snap{scroll-snap-align:start;}

/* Навигационные кнопки карусели */
.car-nav{
  position:absolute;top:42%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--muted-dark);
  color:var(--ink);display:grid;place-content:center;
  font-size:1.4rem;font-weight:800;box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.car-nav.left{left:-8px;} .car-nav.right{right:-8px;}
.car-nav:hover{color:var(--accent);border-color:var(--accent);}

/* ========== DETAIL: GALLERY ========== */
.detail-wrap{max-width:1200px;margin:0 auto;padding:1.5rem;}
.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;}
@media (max-width:1024px){.detail-grid{grid-template-columns:1fr;}}

.gallery-main{position:relative;border-radius:12px;overflow:hidden;background:var(--bg);aspect-ratio:4/3;}
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;}
.price-pill{position:absolute;top:12px;right:12px;background:var(--accent);color:#fff;font-weight:800;border-radius:999px;padding:.35rem .7rem;font-size:.95rem;}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.65rem;margin-top:.75rem;}
.thumb{border-radius:10px;overflow:hidden;background:var(--bg);aspect-ratio:4/3;cursor:pointer;border:1px solid rgba(255,255,255,.08);}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease;}
.thumb:hover img{transform:scale(1.03);}

/* ========== DETAIL: SPECS / DESC / FORM ========== */
.title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;}
.title-row .car-title{font-size:2rem;font-weight:800;line-height:1.1;}

.specs{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem;}
.specs table{width:100%;border-collapse:separate;border-spacing:0 .35rem;}
.specs th{opacity:.85;font-weight:700;text-align:left;font-size:.9rem;white-space:nowrap;color:var(--main);}
.specs td{font-weight:700;color:var(--main);}

.desc{margin-top:1rem;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem;color:var(--main);}

.inquiry{margin-top:1.5rem;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1rem;}
.inquiry h3{margin:0 0 .75rem 0;font-size:1.25rem;font-weight:800;}
.inquiry form p{display:grid;grid-template-columns:160px 1fr;gap:.75rem;align-items:center;margin:.4rem 0;}
.inquiry input,.inquiry textarea{width:100%;background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.6rem .7rem;color:#fff;}
.inquiry textarea{min-height:160px;}
.inquiry .btn-primary{display:inline-grid;place-items:center;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:800;}
.inquiry .btn-primary:hover{filter:brightness(1.03);}

/* ========== LIGHTBOX ========== */
.lightbox[hidden]{display:none;}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:1rem;}
.lightbox-img{max-width:min(92vw,1600px);max-height:82vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);}
.lb-controls{display:flex;align-items:center;gap:1rem;margin-top:.75rem;}
.lb-btn{cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(4px);padding:.6rem .9rem;border-radius:999px;font-weight:800;}
.lb-close{position:absolute;top:14px;right:14px;}

/* ========== LIST PAGES / GRID (4 в ряд) ========== */
/* Совместим все алиасы: .cars-grid, .grid-cars, .list-page .car-grid */
.cars-grid,.grid-cars,.list-page .car-grid{
  display:grid;gap:1.2rem;grid-template-columns:repeat(4,1fr);
  margin-top:16px;
}
@media (max-width:1200px){.cars-grid,.grid-cars,.list-page .car-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .cars-grid,.grid-cars,.list-page .car-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cars-grid,.grid-cars,.list-page .car-grid{grid-template-columns:1fr;} }

/* ===== Фильтры каталога ===== */
.cars-filters{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1rem 0 1.2rem;}
.cars-filters .input{
  min-width:160px;height:40px;padding:0 .8rem;border-radius:.6rem;
  border:1px solid var(--muted-dark);background:var(--bg);color:var(--main);
}
.cars-filters .btn{height:40px;padding:0 1rem;border-radius:.6rem;font-weight:700;border:1px solid transparent;}

/* ===== Карточка ===== */
/* Поддержка обоих неймингов: BEM и прежних классов */
.car-card,.car-item{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--muted-dark);border-radius:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25);overflow:hidden;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.car-card:hover,.car-item:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 24px rgba(0,0,0,.35);}

.car-thumb,.car-card .thumb,.car-card__thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg);}
.car-thumb img,.car-card .thumb img,.car-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0);}

.car-body,.car-item .car-body,.car-card__body{padding:.75rem .9rem 1rem;display:grid;gap:.25rem;}
.car-card .car-title,.car-item .car-title,.car-card__title{margin:0;font-size:1rem;line-height:1.3;font-weight:800;color:var(--main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.car-sub,.car-item .car-sub{color:var(--muted-foreground);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== Бейджи / цены / sold ===== */
.price-badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;padding:.32rem .55rem;border-radius:8px;font-weight:700;font-size:.85rem;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.25);}
.price-badge.is-sold{background:#b91c1c;color:#fff;}
/* Алиасы под рекомендации: */
.badge{position:absolute;top:.55rem;left:.55rem;padding:.25rem .55rem;border-radius:999px;font-size:.82rem;font-weight:700;background:#1e1e1e;color:#eaeaea;border:1px solid rgba(255,255,255,.08);}
.badge--price{
  background:color-mix(in oklab, var(--accent) 18%, transparent);
  color:color-mix(in oklab, var(--accent) 80%, white);
  border-color:color-mix(in oklab, var(--accent) 35%, transparent);
  font-weight:600;
}
.badge--sold{background:#b91c1c;color:#fff;border-color:#b91c1c;}

/* ===== Пагинация ===== */
.pagination,.paginator{display:flex;gap:12px;justify-content:center;align-items:center;margin:28px 0;}
.pagination .btn,.pg{border:1px solid var(--muted-dark);padding:.5rem .9rem;border-radius:8px;text-decoration:none;}
.pg--current{border:1px dashed #444;color:#9e9e9e;}
.page-info,.muted{color:var(--muted-foreground);}

/* ========== HELPERS ========== */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:1rem;}
.mb-2{margin-bottom:.75rem;}
.text-ink{color:var(--ink);}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden;}
.hero--sm{min-height:38svh;}            /* меньше высоты */
.hero__media{position:absolute; inset:0;}
.hero__img{width:100%; height:100%; object-fit:cover; object-position:center;} /* cover для кропа */ /* MDN */ 
.hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.62));}
/* усиление читаемости текста поверх фото согласно WCAG: затемнённый слой повышает контраст */ /* WCAG */

.hero__content{position:relative; z-index:1; padding:3.5rem 0;}
.hero__title{font-size:clamp(2rem,4vw,3.25rem); font-weight:700; margin:.5rem 0 0;}
.hero__subtitle{max-width:52ch; font-size:clamp(1rem,1.5vw,1.25rem); color:rgba(255,255,255,.85); margin:1rem 0 1.5rem;}

.divider{height:1px; background:rgba(255,255,255,.1); border-radius:999px; margin:1rem 0 0;}

/* ===== Grid 2col ===== */
.grid-2col{display:grid; gap:1.25rem; grid-template-columns:1fr;}
@media (min-width: 1024px){ .grid-2col{grid-template-columns:1fr 1fr;} }

/* ===== Cards / text helpers ===== */
.card{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.18); overflow:hidden;}
.card-body{padding:1.25rem;}
.card-title{font-weight:700; font-size:1.25rem; margin:0 0 .5rem;}
.muted{color:rgba(255,255,255,.7);}
.muted-lg{color:rgba(255,255,255,.82);}
.list-clean{margin:1rem 0; padding:0; list-style:none;}
.list-clean li{margin:.35rem 0;}
.contact-dl{margin:1rem 0; display:grid; gap:.5rem;}
.contact-dl dt{color:rgba(255,255,255,.6); font-weight:500;}
.actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem;}

/* ===== Form ===== */
.form-card{}
.form-grid{display:grid; gap:.75rem; grid-template-columns:1fr;}
@media (min-width: 640px){ .form-grid{grid-template-columns:1fr 1fr;} }
.field{display:flex; flex-direction:column; gap:.4rem;}
.field.full{grid-column:1/-1;}
.input, .textarea{width:100%;}
.hp{display:none;}
.form-actions{margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.agree{font-size:.8rem;}

/* Кнопки по центру по вертикали */
.btn{display:inline-flex; align-items:center; justify-content:center; line-height:1.2;}

/* ===== Feature cards ===== */
.feature-grid{display:grid; gap:1rem; grid-template-columns:1fr;}
@media (min-width: 768px){ .feature-grid{grid-template-columns:repeat(3,1fr);} }
.feature-card{border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.03);}
.feature-card__img{width:100%; height:11rem; object-fit:cover; object-position:center;} /* MDN */
@media (min-width: 768px){ .feature-card__img{height:11.5rem;} }
.feature-card__body{padding:1rem;}

/* ===== Map ===== */
.map-card{margin-top:.75rem; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; aspect-ratio:16/9;}
.map-card iframe{width:100%; height:100%; border:0;}
.map-meta{display:flex; flex-wrap:wrap; gap:.65rem 1.5rem; margin:.5rem 0 0;}

/* ===== CTA (отделён от FAQ) ===== */
.cta{display:flex; flex-direction:column; gap:1rem; border:1px solid rgba(255,255,255,.12);
     background:rgba(255,255,255,.04); border-radius:14px; padding:1rem 1.25rem; margin-top:1.25rem;}
@media (min-width: 768px){ .cta{flex-direction:row; align-items:center; justify-content:space-between;} }

/* override card text sizes */
.car-card .car-sub{ font-size:15px !important; }
.car-card .car-title{ font-size:1.25rem !important; line-height:1.25; }

.hp, .hidden {position:absolute !important;left:-9999px !important;height:0 !important;width:0 !important;opacity:0 !important;pointer-events:none !important;}

/* Кнопки под каруселью */
.carousel-ctrls{
  display:flex; gap:.6rem; margin-top:.6rem;
  justify-content:flex-start; align-items:center;
}
.carousel-ctrls .car-nav{
  position:static !important; /* снять absolute из старого стиля */
  inset:auto; transform:none;
  width:40px; height:40px; line-height:40px;
  border-radius:.6rem; border:1px solid var(--muted-dark); background:var(--card); color:var(--main);
  font-size:22px; font-weight:700; text-align:center; cursor:pointer;
}
.carousel-ctrls .car-nav:hover{ background:color-mix(in oklab, var(--card) 85%, white); border-color:color-mix(in oklab, var(--muted-dark) 70%, white); }