/* =============================================================
   SHABAN AUTO GROUP — Journal (blog) components
   Built on the tokens in style.css — loaded alongside it.
   ============================================================= */

/* ---------- POST CARD (used on the index grid + homepage teaser) ---------- */
.postgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(16px,2vw,26px);
}

.postcard{
  position:relative;
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, rgba(35,33,30,0.75), rgba(24,23,22,0.55));
  border:1px solid var(--border-soft);
  border-radius:3px;
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.postcard::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0); transition:transform 520ms var(--ease-out); z-index:2;
}
.postcard:hover{
  transform:translateY(-6px);
  border-color:var(--border-gold-s);
  box-shadow:var(--shadow-lift), 0 0 40px -16px rgba(217,169,62,0.3);
}
.postcard:hover::before{ transform:scaleX(1); }

.postcard__media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--surface);
}
.postcard__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1200ms var(--ease-out);
}
.postcard:hover .postcard__media img{ transform:scale(1.09); }
.postcard__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(17,16,15,0.55), transparent 55%);
}
.postcard__cat{
  position:absolute; z-index:3; top:14px; inset-inline-start:14px;
  padding:6px 12px;
  background:rgba(17,16,15,0.82);
  border:1px solid var(--border-gold-s);
  border-radius:2px;
  font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-bright);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
html[lang="ar"] .postcard__cat{ letter-spacing:0.02em; font-size:0.72rem; }

.postcard__body{ padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; flex:1; }
.postcard__meta{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.postcard__meta span:nth-child(2)::before{ content:"·"; margin-inline-end:10px; color:var(--text-muted); }

.postcard h3{
  font-family:var(--f-display); font-size:clamp(1.1rem,1.6vw,1.35rem);
  text-transform:uppercase; letter-spacing:0.01em; line-height:1.18;
  color:var(--text); margin-bottom:12px;
}
html[lang="ar"] .postcard h3{ text-transform:none; letter-spacing:0; line-height:1.4; }

.postcard p{ color:var(--text-2); font-size:0.92rem; line-height:1.68; flex:1; }
.postcard .tlink{ margin-top:18px; align-self:flex-start; }

/* ---------- HOMEPAGE TEASER STRIP ---------- */
.journal-teaser{
  border:1px solid var(--border);
  border-radius:3px;
  padding:clamp(28px,3.6vw,54px);
  background:
    radial-gradient(ellipse 65% 120% at 15% 15%, rgba(217,169,62,0.1), transparent 60%),
    linear-gradient(150deg, var(--surface-2), var(--surface) 60%);
  position:relative; overflow:hidden;
}
.journal-teaser .postgrid{ margin-top:clamp(28px,3vw,44px); }

/* ---------- ARTICLE (single post) ---------- */
.post-hero{
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  min-height:260px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.post-hero img{ width:100%; height:100%; object-fit:cover; }
.post-hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(17,16,15,0.92) 0%, rgba(17,16,15,0.35) 55%, rgba(17,16,15,0.15) 100%);
}
.post-hero__in{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  padding-block-end:clamp(30px,4vw,58px);
}

.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-bottom:18px;
}
.post-meta span:not(:first-child)::before{ content:"·"; margin-inline-end:14px; color:var(--text-muted); }
.post-cat{
  padding:6px 13px; border:1px solid var(--border-gold); border-radius:2px;
  font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-bright); background:rgba(217,169,62,0.08);
}
html[lang="ar"] .post-cat{ letter-spacing:0.02em; font-size:0.74rem; }

.post-article{
  max-width:76ch;
  margin-inline:auto;
  padding-block:clamp(40px,5vw,74px);
}
.post-article p{
  color:var(--text-2);
  font-size:1.05rem;
  line-height:1.9;
  margin-block-end:1.5em;
}
.post-article h2{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.4vw,2rem);
  text-transform:uppercase; letter-spacing:0.01em;
  color:var(--text);
  margin-block:2em 0.8em;
  padding-top:0.6em;
  border-top:1px solid var(--border-soft);
}
html[lang="ar"] .post-article h2{ text-transform:none; letter-spacing:0; }
.post-article h2:first-child{ margin-top:0; border-top:0; padding-top:0; }

.post-article h3{
  font-family:var(--f-body); font-weight:600;
  font-size:1.12rem; color:var(--text);
  margin-block:1.6em 0.6em;
}
.post-article ul, .post-article ol{
  margin-block-end:1.5em;
  padding-inline-start:1.3em;
  color:var(--text-2);
  font-size:1.02rem; line-height:1.85;
}
.post-article li{ margin-block-end:0.5em; }
.post-article li::marker{ color:var(--gold); }
.post-article strong{ color:var(--text); font-weight:600; }
.post-article a:not(.tlink){
  color:var(--gold-bright);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--border-gold-s);
}
.post-article blockquote{
  margin:1.8em 0;
  padding-inline-start:1.3em;
  border-inline-start:2px solid var(--gold);
  color:var(--text);
  font-family:var(--f-display);
  font-size:1.2rem;
  letter-spacing:0.01em;
  line-height:1.5;
}
.post-article table{
  width:100%; border-collapse:collapse; margin-block-end:1.8em;
  font-size:0.92rem;
}
.post-article th, .post-article td{
  padding:12px 14px; border:1px solid var(--border-soft); text-align:start;
}
.post-article th{
  font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); background:var(--surface-2);
}
html[lang="ar"] .post-article th{ letter-spacing:0.02em; font-size:0.76rem; }
.post-article td{ color:var(--text-2); }

.post-tags{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-block-start:2.5em; padding-top:2em;
  border-top:1px solid var(--border-soft);
}
.post-tags span:first-child{ margin-inline-end:6px; }
.post-tags li{
  font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-2); padding:6px 12px;
  border:1px solid var(--border-soft); border-radius:2px;
  background:rgba(35,33,30,0.5);
}
html[lang="ar"] .post-tags li{ letter-spacing:0.02em; font-size:0.72rem; }

.post-back{ margin-block-start:2.5em; }
@media (max-width:480px){
  /* a few of these back-links carry a long page title and ran past the
     edge of the screen, since buttons are nowrap by default */
  .post-back .btn{ white-space:normal; text-align:start; }
}

/* ---------- Language-scoped content blocks (used by article bodies + cards) ---------- */
[data-lang]{ display:none; }
html[lang="en"] [data-lang="en"]{ display:block; }
html[lang="ar"] [data-lang="ar"]{ display:block; }
/* .postcard is itself a flex column — a higher-specificity override so the
   generic rule above doesn't collapse it back to block and break the
   media/body stacking or the equal-height row alignment in .postgrid. */
html[lang="en"] .postcard[data-lang="en"]{ display:flex; }
html[lang="ar"] .postcard[data-lang="ar"]{ display:flex; }

/* ===========================================================================
   FAQ accordion — used on the parts / service / model landing pages.
   Built only from existing design tokens (gold accent, soft borders, the two
   text tones and the display/body font pair) so it reads as part of the same
   system as .post-article rather than a bolted-on SEO block. Native <details>
   keeps it keyboard accessible and readable with JavaScript disabled, which
   also means the answers are present in the HTML for crawlers.
   =========================================================================== */
.faq{
  margin-block-end:1.8em;
  border-top:1px solid var(--border-soft);
}
.faq__item{
  border-bottom:1px solid var(--border-soft);
}
.faq__item summary{
  cursor:pointer;
  list-style:none;
  padding-block:1.05em;
  padding-inline-end:2.2em;
  position:relative;
  color:var(--text);
  font-family:var(--f-body);
  font-weight:600;
  font-size:1.03rem;
  line-height:1.6;
  transition:color .25s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-bright); }
.faq__item summary:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:3px;
}
/* Chevron, drawn in CSS so it needs no sprite reference and flips with dir */
.faq__item summary::after{
  content:"";
  position:absolute;
  inset-inline-end:0.35em;
  top:1.45em;
  width:8px; height:8px;
  border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .3s ease;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__item[open] summary{ color:var(--gold-bright); }
.faq__item p{
  margin-block:0 1.4em !important;
  color:var(--text-2);
  font-size:1rem;
  line-height:1.85;
  padding-inline-end:2.2em;
}