/* ===========================
   Sós Autóklinika – styles.css
   =========================== */

/* Alapszínek, változók */
:root{
  --bg:#0a0a0a;
  --panel:#111315;
  --muted:#99a1a8;
  --text:#e6e6e6;
  --brand:#ff7a1a; /* narancs akcentus */
  --card:#161a1d;
  --ring:#ffb380;
}

/* Alap/reset */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
a{ color:var(--text); text-decoration:none; }

/* Layout segéd */
.container{ max-width:1320px; margin:0 auto; padding:16px; }

/* Header */
header.container{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:20px;
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
nav a{ opacity:.8; padding:8px 10px; border-radius:10px; }
nav a:hover, nav a.active{ background:var(--card); opacity:1; outline:1px solid #1f2428; }
.site-logo{ max-height:60px; height:auto; width:auto; }
.header-phone a{ color:var(--brand); font-weight:600; font-size:16px; text-decoration:none; margin-left:12px; }
.header-phone a:hover{ text-decoration:underline; }

/* Hero */
.hero{
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(255,122,26,.25), transparent 60%),
    radial-gradient(1200px 600px at 120% -20%, rgba(255,122,26,.14), transparent 60%);
  border-bottom:1px solid #1b1f22;
}
.hero-inner{ padding:72px 0; }

/* Tipográfia */
h1{ font-size:clamp(28px,4.2vw,46px); line-height:1.1; margin:0 0 12px; }
h2{ font-size:clamp(22px,3vw,32px); margin:0 0 8px; }
h3{ margin:0 0 6px; }
p{ margin:0 0 12px; color:#d0d7de; }

/* Gombok */
.btn{ display:inline-block; padding:10px 16px; border:1px solid #2a2f34; border-radius:14px; background:var(--panel); margin-right:8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn.primary{ background:linear-gradient(180deg, var(--brand), #ff6a00); color:#141414; border-color:#ff7a1a; box-shadow:0 0 0 3px rgba(255,122,26,.25); }
.btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 6px 14px rgba(0,0,0,.4); border-color:var(--brand); }
.btn.primary:hover{ box-shadow:0 0 12px rgba(255,122,26,.7), 0 6px 16px rgba(255,122,26,.5); }

/* Kártyák/rácsok */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px auto; }
.card{ background:var(--card); border:1px solid #1f2428; border-radius:18px; padding:16px; }
.highlight{ margin:32px auto; }
.ticks{ display:grid; gap:8px; margin:12px 0 0; padding:0; }
.ticks li{ list-style:none; padding-left:28px; position:relative; }
.ticks li::before{ content:"✓"; position:absolute; left:8px; color:var(--brand); }

/* Lábléc */
footer{ border-top:1px solid #1b1f22; color:var(--muted); font-size:14px; }

/* ===========================
   Projektek LISTA oldala
   =========================== */
.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px; margin-top:16px;
  align-items:start;             /* ne húzza egyforma magasra a kártyákat */
}
.project-card{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid #1f2428;
  border-radius:18px;
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 8px 18px rgba(0,0,0,.45); }
.project-card[aria-disabled="true"]{ cursor:not-allowed; opacity:.95; }

/* Kép/fej rész – működjön IMG-ként és DIV-ként is */
.project-card .project-thumb, img.project-thumb{
  width:100%; height:180px; display:block; object-fit:cover;
}
/* Ha DIV-ként használod, kapjon alap helykitöltőt */
div.project-thumb{
  background:
    linear-gradient(180deg, rgba(255,122,26,.25), rgba(255,122,26,0) 60%),
    repeating-linear-gradient(90deg, #0f1418 0 2px, #0e1317 2px 4px);
}
div.project-thumb.alt{
  background:
    linear-gradient(180deg, rgba(64,180,255,.22), rgba(64,180,255,0) 60%),
    repeating-linear-gradient(90deg, #0f1418 0 2px, #0e1317 2px 4px);
}
.project-body{ padding:14px 16px; flex:0 0 auto; }

/* ===========================
   Projekt AL-OLDAL (galéria)
   =========================== */
/* Galéria + leírás egy képernyőn */
.project-layout{
  height:calc(100vh - 120px);          /* kb. header+footer levonva */
  display:grid; grid-template-rows:77% 23%;
  justify-items:center;
}

/* Slider */
.slider{
  position:relative;
  width:min(100%,1100px); height:100%;
  overflow:hidden; margin-inline:auto;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.slider::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55) 75%);
  pointer-events:none;
}
.slides{ position:absolute; inset:0; }
.slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .6s ease;
}
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); color:#fff; border:1px solid #2a2f34;
  border-radius:999px; padding:8px 12px; cursor:pointer; font-size:22px;
}
.arrow:hover{ background:rgba(0,0,0,.65); border-color:var(--brand); }
.prev{ left:16px; } .next{ right:16px; }
.slider-caption{ position:absolute; left:0; right:0; bottom:22px; }
.slider-caption h1{ margin:0 0 6px; }

/* Leírás blokk a galéria alatt */
.project-desc{ padding-top:14px; overflow:auto; }

/* ===========================
   Rólunk oldal
   =========================== */
.about-grid{
  display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:center;
}
.about-photo{
  width:100%; height:auto; border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.4); object-fit:cover;
}
/* Alternatív középre zárt elrendezéshez */
.about-center{ text-align:center; max-width:800px; margin:0 auto; }
.about-center .about-photo{ max-width:420px; margin-bottom:24px; }

/* Almenü (opcionális) */
.subnav{ display:flex; gap:12px; margin:8px 0 18px; flex-wrap:wrap; }
.subnav a{ padding:6px 10px; border:1px solid #2a2f34; border-radius:10px; opacity:.9; }
.subnav a:hover, .subnav a.active{ background:var(--card); border-color:var(--brand); opacity:1; }

/* Kapcsolat form */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin-top:10px; }
label{ display:grid; gap:6px; margin:8px 0; }
input,textarea{
  background:#0d0f12; border:1px solid #1f2428; border-radius:12px;
  padding:10px; color:var(--text); outline:2px solid transparent;
}
input:focus, textarea:focus{ outline-color:var(--ring); border-color:#2a2f34; }
.note{ font-size:14px; color:var(--muted); }

.bmw-n43-bg{ background:url("../img/bmw-n43-bg.jpg") no-repeat center/cover; color:#fff; }
.project-hero{ padding:100px 0; background:rgba(0,0,0,.5); }

@media (max-width:780px){
  .grid-3{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  header.container{ flex-wrap:wrap; gap:8px; }
  nav{ width:100%; display:flex; gap:8px; }
  .hero-inner{ padding:44px 0; }
  .project-card .project-thumb, img.project-thumb{ height:140px; }
}
.projects{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  gap: 18px;
  align-items: start;                    }

@media (max-width: 1100px){
  .projects{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .projects{ grid-template-columns: 1fr; }
}
.projects{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:18px;
  align-items:start;
}
.projects > img{ display:none; } /* ha lenne magában álló kép a rácsban */
@media (max-width:1100px){ .projects{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:700px){  .projects{ grid-template-columns:1fr !important; } }
.container.grid-3 { max-width: 1320px; }