/* ===========================
   Gold Detailing — Part 2 Components (author-tuned)
   Sections, cards, grids, interactive bits
   =========================== */

/* 1) Cards and surfaces (brass/copper micro-accent) */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)),
    radial-gradient(800px 400px at 120% -20%, rgba(255,255,255,.015), transparent 60%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--gdt-radius);
  box-shadow: var(--gdt-shadow-1);
  padding: clamp(16px, 2.2vw, 24px);
}

.placeholder{
  display:block; width:100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.06));
  border:1px dashed rgba(255,255,255,.12);
  border-radius: var(--gdt-radius);
}

/* Micro “material” tint on hover (subtle copper) */
.card:hover{ border-color: color-mix(in oklab, var(--gdt-copper-500) 30%, rgba(255,255,255,.08) 70%) }

/* 2) Section heads */
.section-head{ margin-bottom: clamp(18px, 2.6vw, 32px) }
.section-head h2{ margin-bottom: 8px; letter-spacing: .02em }
.section-head .lead{ max-width: 68ch }

/* 3) HERO (with author glow rings that sit inside .hero-bg) */
.hero{ padding-top: clamp(70px, 10vw, 160px); padding-bottom: clamp(60px, 8vw, 120px) }
.hero-bg{ position:absolute; inset:0; overflow:hidden; z-index:0 }
.hero-image, .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(105%) contrast(1.05); z-index:1 }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,var(--overlay, .45)), rgba(0,0,0,.55)); z-index:2 }

/* Glow — теперь поверх overlay */
.hero-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:.58; mix-blend-mode: screen;
  background-image:
    radial-gradient(900px 520px at 12% -14%, var(--gdt-glow-gold-1), transparent 60%),
    radial-gradient(700px 420px at 108% 0%, var(--gdt-glow-gold-2), transparent 68%),
    radial-gradient(1200px 680px at 50% -30%, rgba(255,255,255,.02), transparent 60%);
  background-repeat:no-repeat;
}
.hero-inner{ position:relative; z-index:4 }
.hero-image, .hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(105%) contrast(1.05)
}
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,var(--overlay, .45)), rgba(0,0,0,.55)) }
.hero-inner{ position:relative; z-index:1 }
.hero-copy{ max-width: 800px }
.hero-badge{
  display:inline-block; padding:6px 10px; border-radius: 999px;
  background: rgba(210,180,108,.15); border:1px solid rgba(210,180,108,.38);
  color: var(--gdt-gold-300); font-weight:700; margin-bottom: 10px; letter-spacing:.02em
}
.hero-bullets{ list-style:none; margin:12px 0 18px; padding:0; display:grid; gap:8px }
.hero-bullets li::before{ content:"✓"; color: var(--gdt-gold-400); margin-right:8px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 16px }
.hero-rating{ display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--gdt-muted) }
.hero-rating .stars{ color: var(--gdt-gold-400); letter-spacing:2px }

/* 4) Services grid and cards (desktop grid; mobile carousel in Part 4) */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.svc-card{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  border-radius: var(--gdt-radius); background: var(--gdt-surface);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--gdt-shadow-1);
  transition: transform var(--gdt-mid) var(--gdt-ease), box-shadow var(--gdt-mid) var(--gdt-ease), border-color var(--gdt-fast) var(--gdt-ease);
}
.svc-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--gdt-shadow-2);
  border-color: color-mix(in oklab, var(--gdt-copper-500) 34%, rgba(255,255,255,.08) 66%);
}
.svc-media{ position:relative; display:block; overflow:hidden }
.svc-thumb{ width:100%; height:auto; display:block; aspect-ratio: 4/3; object-fit:cover }
.svc-badge{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgb(0 0 0 / 87%);
    border: 1px solid rgba(210, 180, 108, .34);
    color: var(--gdt-gold-300);
    font-weight: 700;
}
.svc-body{ padding: 16px; display:flex; flex-direction:column; gap:12px }
.svc-title a{ transition: color var(--gdt-fast) var(--gdt-ease) }
.svc-title a:hover{ color: var(--gdt-accent-2) }
.svc-desc{ color: var(--gdt-muted) }
.svc-meta{ display:flex; align-items:center; gap:8px; color: var(--gdt-muted) }
.svc-meta .price{ color:#fff; font-weight:700 }
.svc-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* 5) Pricing */
.pricing-wrap{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px) }
.pricing-group{ border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius); overflow:hidden; background: var(--gdt-surface) }
.pricing-title{
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0))
}
.pricing-table{ display:grid }
.pricing-row{
  display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:center;
  padding:14px 16px; border-bottom:1px dashed rgba(255,255,255,.08)
}
.pricing-row:last-child{ border-bottom:none }
.p-main{ display:flex; flex-direction:column; gap:6px }
.p-name{ font-weight:700 }
.p-desc{ color: var(--gdt-muted) }
.p-side{ display:flex; align-items:center; gap:10px }
.p-price{ font-weight:800; color:#fff }
.p-badge{
  padding:4px 8px; border-radius:999px; background: rgba(210,180,108,.14);
  border:1px solid rgba(210,180,108,.32); color: var(--gdt-gold-300); font-weight:700
}
.pricing-table--service .pricing-row{ padding:14px 12px }

/* 6) Content areas, grids */
.content-area .page-content{ display:grid; gap:16px }
.page-grid{ display:grid; grid-template-columns: 3fr 1.4fr; gap: clamp(18px, 3vw, 32px) }
.page-side .contact-card .contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.page-side .side-cta{ display:flex; gap:10px; margin-top:10px }

/* 7) Why features */
.features-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px) }
.feature-card{
  background: var(--gdt-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--gdt-radius);
  padding:16px; display:grid; gap:10px; box-shadow: var(--gdt-shadow-1)
}
.feature-icon{
  width:50px; height:50px; display:grid; place-items:center; border-radius:12px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)
}
.feature-metric{ color: var(--gdt-gold-400); font-weight:800 }

/* 8) Process timeline */
.process-steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset: step }
.process-step{
  position:relative; display:grid; gap:12px; background: var(--gdt-surface);
  border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius); padding:16px
}
.step-top{ display:flex; align-items:baseline; gap:12px }
.step-num{
  font-weight:800; color: var(--gdt-gold-400); background: rgba(210,180,108,.12);
  border:1px solid rgba(210,180,108,.32); border-radius: 10px; padding:4px 8px
}
.step-title{ font-size:1.15rem }
.step-time{ color: var(--gdt-muted) }
.step-body{ display:grid; gap: 12px; align-items:flex-start }
.step-icon{
  width:64px; height:64px; display:grid; place-items:center; border-radius:14px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)
}
.step-media img{ border-radius: var(--gdt-radius) }

/* 9) Before/After slider */
.ba-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px) }
.ba-item{ display:grid; gap:10px }
.ba-wrap{ position:relative; overflow:hidden; border-radius: var(--gdt-radius); border:1px solid rgba(255,255,255,.06) }
.ba-wrap.sm{ aspect-ratio: 4/3 }
.ba-img{ width:100%; height:auto; display:block; object-fit:cover }
.ba-after{ position:absolute; inset:0; clip-path: inset(0 0 0 50%) }
.ba-range{
  position:absolute; left:0; right:0; bottom:12px; margin:auto; width:50%;
  -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background: rgba(255,255,255,.14); z-index:2
}
.ba-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background: var(--gdt-gold-500); border:2px solid #111; box-shadow:0 2px 6px rgba(0,0,0,.5)
}
.ba-handle{
  position:absolute; top:0; bottom:0; width:2px; background: rgba(255,255,255,.82); z-index:1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5)
}

/* 10) FAQ accordion */
.faq-accordion{ display:grid; gap:10px }
.faq-item{ border:1px solid rgba(255,255,255,.08); border-radius: var(--gdt-radius); background: var(--gdt-surface); padding:0 }
.faq-item > summary{
  cursor:pointer; list-style:none; padding:14px 16px; font-weight:700;
  border-radius: var(--gdt-radius); position:relative
}
.faq-item[open] > summary{ color: var(--gdt-gold-400) }
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-item > .faq-body{ padding:0 16px 16px; color: var(--gdt-muted) }

/* 11) Expert block */
.expert-wrap{ display:grid; grid-template-columns: 1.2fr 1.8fr; gap: clamp(18px, 2.6vw, 32px); align-items:center }
.expert-photo{ border-radius: var(--gdt-radius); border:1px solid rgba(255,255,255,.06); box-shadow: var(--gdt-shadow-1) }
.expert-msg{ font-size: clamp(18px, 1.6vw, 22px); color:#fff; margin: 0 0 10px }
.expert-meta{ display:grid; gap:4px; margin-bottom:10px }
.expert-name{ font-weight:800 }
.expert-badges{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap }
.expert-badges .badge{
  padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); margin-bottom: 10px;
}
.expert-cta{ display:flex; gap:10px; flex-wrap:wrap }

/* 12) Blog grid and cards */
.blog-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px)
}
.blog-card{
  display:flex; flex-direction:column; background: var(--gdt-surface);
  border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius); box-shadow: var(--gdt-shadow-1)
}
.blog-card.sm .blog-title{ font-size:1.05rem }
.blog-media{ display:block; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); border-top-left-radius: var(--gdt-radius); border-top-right-radius: var(--gdt-radius) }
.blog-thumb{ width:100%; aspect-ratio: 16/10; background: rgba(255,255,255,.03) }
.blog-body{ padding: 14px 16px; display:grid; gap:8px }
.blog-meta{ display:flex; gap:8px; align-items:center }
.blog-title a{ transition: color var(--gdt-fast) var(--gdt-ease) }
.blog-title a:hover{ color: var(--gdt-accent-2) }

/* 13) Generic archive cards */
.archive-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px) }
.generic-card{ display:flex; flex-direction:column; background: var(--gdt-surface); border:1px solid rgba(255,255,255,.06); border-radius: var(--gdt-radius) }
.generic-media{ display:block; border-bottom:1px solid rgba(255,255,255,.06) }
.generic-thumb{ width:100%; aspect-ratio: 4/3; background: rgba(255,255,255,.03) }
.generic-body{ padding: 14px 16px; display:grid; gap:8px }

/* 14) Filters (archives) */
.filters{ display:flex; align-items:center; gap:10px; margin-bottom: 16px }
.filter-list{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap }
.filter-list a{
  display:inline-flex; padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); transition: color var(--gdt-fast) var(--gdt-ease), border-color var(--gdt-fast) var(--gdt-ease)
}
.filter-list a.active, .filter-list a:hover{ color: var(--gdt-accent-2); border-color: rgba(87,198,207,.45) }

/* 15) Pagination */
.pagination{ display:flex; justify-content:center; margin-top: 22px }
.pagination .page-link{ display:flex; gap:10px; list-style:none; padding:0; margin:0 }
.pagination .page-link li a,
.pagination .page-link li span{
  display:inline-flex; min-width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02);
  margin:0 4px
}
.pagination .page-link li .current{ background: rgba(210,180,108,.18); border-color: rgba(210,180,108,.35); color: var(--gdt-gold-300); font-weight:800 }

/* 16) Article layout (single) */
.article-wrap{
  display:grid; grid-template-columns: 1fr 320px; gap: clamp(18px, 2.6vw, 32px)
}
.article-content{ min-width:0 }
.article-content .entry-content :where(p, ul, ol, blockquote, pre, table, img, figure){ margin-bottom: 1em }
.article-content .entry-content h2{ margin-top: 1.4em }
.article-content .entry-content h3{ margin-top: 1.2em }
.post-nav{ display:flex; justify-content:space-between; margin-top: 18px }
.tags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.tags a{ color:#fff; opacity:.92; transition: color var(--gdt-fast) var(--gdt-ease) }
.tags a:hover{ color: var(--gdt-accent-2) }

/* 17) TOC */
.toc{ position:sticky; top:100px }
.toc h3{ margin-bottom: 10px }
.toc-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.toc-list a{ display:inline-block; color: var(--gdt-muted) }
.toc-list a:hover{ color: var(--gdt-accent-2) }

/* 18) Author box */
.author-box{ display:grid; grid-template-columns: 96px 1fr; gap:14px; align-items:start }
.author-avatar{ border-radius: 50%; border:2px solid rgba(255,255,255,.1) }

/* 19) Location section */
.location-wrap{ display:grid; grid-template-columns: 1.1fr 1.3fr; gap: clamp(18px, 2.6vw, 32px); align-items:start }
.location-features{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px; color: var(--gdt-muted) }
.location-map{ overflow:hidden }
.map-embed iframe{ display:block; width:100%; height:420px; border:0; border-radius: var(--gdt-radius) }

/* 20) Not Found (404) */
.notfound .nf-wrap{ display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(18px, 2.6vw, 32px); align-items:center }
.nf-hero{ position:relative; height: 180px; margin-bottom: 8px }
.nf-404{
  position:absolute; inset:auto auto 0 0; font-weight:900; font-size: clamp(64px, 12vw, 160px);
  line-height:.8; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.2);
}
.nf-car{ position:absolute; left:0; right:0; bottom:4px; height: 48px }
.nf-body{
  position:absolute; left:10%; width:180px; height:32px; background: linear-gradient(180deg, #1a202a, #0c1118);
  border:1px solid rgba(255,255,255,.12); border-radius: 10px 14px 12px 12px; box-shadow: 0 10px 25px rgba(0,0,0,.5)
}
.nf-light{ position:absolute; top:6px; width:10px; height:10px; border-radius:50%; background:#fff }
.nf-light--left{ left: calc(10% + 10px) }
.nf-light--right{ left: calc(10% + 160px) }
.nf-car::after{
  content:""; position:absolute; top:-60px; left:calc(10% - 40px); width:280px; height:160px; pointer-events:none;
  background: radial-gradient(ellipse 200px 120px at 40px 110px, rgba(255,255,200,.12), transparent 60%),
              radial-gradient(ellipse 240px 140px at 200px 110px, rgba(255,255,200,.12), transparent 60%);
  filter: blur(1px); mix-blend-mode: screen; animation: sweep 5s var(--gdt-ease) infinite
}
@keyframes sweep{
  0%{ transform: translateX(-10%) rotate(-2deg); opacity:.8 }
  50%{ transform: translateX(15%) rotate(2deg); opacity:1 }
  100%{ transform: translateX(-10%) rotate(-2deg); opacity:.8 }
}
.nf-search{ display:flex; gap:10px; margin: 12px 0 10px }
.nf-search input{
  flex:1; min-width:0; border-radius: var(--gdt-radius); border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color:#fff; padding:12px 14px
}
.nf-actions{ display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 12px }
.nf-side .nf-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px }

/* 21) Service layout */
.service-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 2.6vw, 32px) }
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.checklist li::before{ content:"✓"; color: var(--gdt-gold-400); margin-right:8px }

/* 22) Utility reveals */
.reveal{ transform: translateY(10px); transition: opacity var(--gdt-mid) var(--gdt-ease), transform var(--gdt-mid) var(--gdt-ease) }
.revealed{ opacity:1 !important; transform: none !important }

/* 23) Responsive */
@media (max-width: 1200px){
  .features-grid{ grid-template-columns: repeat(3, 1fr) }
  .services-grid{ grid-template-columns: repeat(1, 1fr) }
  .blog-grid, .archive-grid{ grid-template-columns: repeat(2, 1fr) }
  .page-grid{ grid-template-columns: 1fr }
  .article-wrap{ grid-template-columns: 1fr }
  .expert-wrap{ grid-template-columns: 1fr }
  .location-wrap{ grid-template-columns: 1fr }
  .notfound .nf-wrap{ grid-template-columns: 1fr }
}
@media (max-width: 768px){
  .pricing-wrap{ grid-template-columns: 1fr }
  .features-grid{ grid-template-columns: repeat(2, 1fr) }
  .ba-grid{ grid-template-columns: 1fr }
  .service-grid{ grid-template-columns: 1fr }
}
@media (max-width: 520px){
  .blog-grid, .archive-grid{ grid-template-columns: 1fr }
  .services-grid{ grid-template-columns: 1fr }
  .features-grid{ grid-template-columns: 1fr }
}

/* Why emojis: crisp, neutral chip behind the glyph */
.feature-icon{
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.feature-icon .emoji{
  display:block;
  font-size: 26px; line-height: 1;
  /* cross-platform color emoji font stack */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", "Twemoji Mozilla",sans-serif;
  /* keep glyph visually centered */
  transform: translateY(1px);
}
@media (min-resolution: 2dppx){
  .feature-icon{ -webkit-font-smoothing: antialiased; }
}

/* Feature card watermark from emoji (very subtle, colorless) */
.feature-card{
  position: relative;
  overflow: hidden; /* keeps watermark inside */
}

.feature-card::after{
  content: attr(data-emoji);
  position: absolute;
  right: -8px;          /* tucks into the corner */
  bottom: -12px;
  font-size: clamp(80px, 18vw, 160px);
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  opacity: .06;         /* barely visible */
  filter: grayscale(1) saturate(0) brightness(1.15);
  user-select: none;
  pointer-events: none;
  transform: rotate(-8deg);
  /* soft blend on various backgrounds */
  mix-blend-mode: normal;
}

/* Keep the small chip emoji clean and centered */
.feature-icon{
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.feature-icon .emoji{
  display:block;
  font-size: 26px; line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  transform: translateY(1px);
}

/* Process-step watermark from emoji (very subtle) */
.process-step{
  position: relative;
  overflow: hidden; /* keeps watermark inside */
}

.process-step::after{
  content: attr(data-emoji);
  position: absolute;
  right: -8px;
  bottom: -12px;
  font-size: clamp(72px, 16vw, 140px);
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  opacity: .06; /* barely visible */
  filter: grayscale(1) saturate(0) brightness(1.15);
  user-select: none;
  pointer-events: none;
  transform: rotate(-6deg);
  transition: transform var(--gdt-slow) var(--gdt-ease), opacity var(--gdt-fast) var(--gdt-ease);
  will-change: transform;
  transform-origin: 85% 85%;
}

/* Slight tilt/brighten on hover/focus */
.process-step:hover::after,
.process-step:focus-within::after{
  transform: rotate(-2deg) scale(1.03);
  opacity: .08;
}

/* Small emoji chip inside the step icon (optional, keep if you still show the chip) */
.step-icon .emoji{
  display:block;
  font-size: 22px;
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce){
  .process-step::after{ transition:none }
  .process-step:hover::after,
  .process-step:focus-within::after{
    transform:none; opacity:.06;
  }
}

address {
    margin-bottom: 10px;
}