/* ============================================================================
   ApnaMechanic — PREMIUM TEMPLATE TOOLKIT
   ----------------------------------------------------------------------------
   Shared, reusable CSS for the per-template premium reskin. Consumes the
   --am-* design tokens already defined in apnamechanic-premium.css (do NOT
   redefine tokens here). Loaded AFTER apnamechanic-premium.css so it can build
   on the .am-* component library.

   Powers these components/utilities:
     .am-pagehero   — PageHero.astro       (premium page-header band)
     .am-breadcrumb — Breadcrumb.astro     (premium trail; schema is JS-LD)
     .am-related    — RelatedPosts.astro   (premium related-posts grid)
     .am-prose      — ProseWrapper.astro   (premium typography for WP HTML)
     .am-cta-band   — CtaBand.astro        (dark final-CTA band reuse)
     .am-archive    — listing/archive card-grid utilities

   ADDITIVE & SEO-SAFE: styling only — no content/markup/schema changes.
   ========================================================================== */

/* ============================================================================
   1. PAGE HERO — premium page-header band (PageHero.astro)
   ========================================================================== */
.am-pagehero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:var(--am-dark);
  min-height:42vh;
}
.am-pagehero--compact{min-height:0;padding:46px 0;} /* was 32vh — mostly empty dark space on brand pages */
.am-pagehero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;}
.am-pagehero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1200px 520px at 50% 70%,rgba(0,0,0,0),rgba(0,0,0,.45)),
    linear-gradient(135deg,rgba(13,13,13,.92) 0%,rgba(42,0,0,.78) 55%,rgba(244,34,34,.40) 100%);}
.am-pagehero__content{
  position:relative;z-index:2;text-align:center;
  padding:64px 20px 56px;max-width:900px;}
.am-pagehero__crumbs{margin-bottom:18px;}
.am-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Slim breadcrumb-only strip (pages whose content carries its own title) */
.am-pagehero--minimal{background:var(--am-dark);padding:14px 0;
  min-height:0!important;display:block!important;}
.am-pagehero--minimal .am-pagehero__content{padding:0 20px;max-width:1200px;margin:0 auto;}
.am-pagehero--minimal .am-pagehero__crumbs{margin:0;}

.am-pagehero__kicker{
  display:inline-block;color:#fff;
  background:var(--am-primary-text); /* #d11414: AA for small white text */
  font:800 12px/1 var(--am-font-head);
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 16px;border-radius:30px;margin-bottom:18px;}
.am-pagehero__title{
  display:block;color:#fff;
  font:800 clamp(1.9rem,4.5vw,3.4rem)/1.15 var(--am-font-head);
  letter-spacing:-.01em;margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.5);}
.am-pagehero__subtitle{
  color:rgba(255,255,255,.92);
  font:400 clamp(1rem,2vw,1.18rem)/1.7 var(--am-font-body);
  max-width:640px;margin:16px auto 0;
  text-shadow:0 1px 4px rgba(0,0,0,.4);}

/* Breadcrumb sitting inside the dark hero: invert colors for legibility. */
.am-pagehero__crumbs .am-breadcrumb{background:transparent;padding:0;}
.am-pagehero__crumbs .am-breadcrumb__list{justify-content:center;}
.am-pagehero__crumbs .am-breadcrumb__link{color:rgba(255,255,255,.78);}
.am-pagehero__crumbs .am-breadcrumb__link:hover{color:#fff;}
.am-pagehero__crumbs .am-breadcrumb__current{color:rgba(255,255,255,.95);}
.am-pagehero__crumbs .am-breadcrumb__sep{color:rgba(255,255,255,.45);}

@media (max-width:768px){
  .am-pagehero,.am-pagehero--compact{min-height:auto;}
  .am-pagehero__content{padding:48px 18px 40px;}
}

/* ============================================================================
   2. BREADCRUMB — premium trail (Breadcrumb.astro)
   ========================================================================== */
.am-breadcrumb{
  background:var(--am-gray-bg);
  border-bottom:1px solid var(--am-border);
  padding:12px 0;
  font-family:var(--am-font-body);}
.am-breadcrumb .rh-container{max-width:1180px;margin:0 auto;padding:0 20px;}
.am-breadcrumb__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  list-style:none;margin:0;padding:0;
  font-size:13px;}
.am-breadcrumb__item{display:inline-flex;align-items:center;gap:6px;}
.am-breadcrumb__link{
  color:var(--am-text-body);text-decoration:none;
  transition:color .2s;}
.am-breadcrumb__link:hover{color:var(--am-primary);}
.am-breadcrumb__current{color:var(--am-text-muted);font-weight:600;}
.am-breadcrumb__sep{color:var(--am-text-muted);margin:0 2px;}

/* ============================================================================
   3. RELATED POSTS — premium grid (RelatedPosts.astro)
   Reuses .am-blog-card / .am-blog-grid from apnamechanic-premium.css; this only
   adds the section frame + the card media wrapper the homepage used inline.
   ========================================================================== */
.am-related{
  max-width:1180px;margin:0 auto;padding:56px 20px;}
.am-related__title{
  text-align:center;margin-bottom:8px;}
.am-related__grid{margin-top:34px;}
.am-blog-card__media{display:block;overflow:hidden;background:var(--am-gray-bg);}
.am-blog-card__media img{
  width:100%;height:200px;object-fit:cover;display:block;
  transition:transform .3s;}
.am-blog-card:hover .am-blog-card__media img{transform:scale(1.05);}
.am-blog-card__title a{color:inherit;text-decoration:none;transition:color .2s;}
.am-blog-card__title a:hover{color:var(--am-primary);}

@media (max-width:960px){
  .am-related__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .am-related{padding:44px 18px;}
  .am-related__grid{grid-template-columns:1fr;}
}

/* ============================================================================
   4. PROSE — premium typography for inherited WP HTML (ProseWrapper.astro)
   Scoped under .am-prose so it only restyles content INSIDE the wrapper. All
   rules target generic WP HTML elements — no content/markup changes needed.
   ========================================================================== */
.am-prose{
  max-width:820px;margin:0 auto;
  font-family:var(--am-font-body);
  font-size:17px;line-height:1.8;
  color:var(--am-text-body);}
.am-prose--narrow{max-width:720px;}

/* Headings */
.am-prose h1,.am-prose h2,.am-prose h3,
.am-prose h4,.am-prose h5,.am-prose h6{
  font-family:var(--am-font-head);
  color:var(--am-text-primary);
  letter-spacing:-.01em;line-height:1.25;}
.am-prose h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;margin:0 0 18px;}
.am-prose h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:46px 0 16px;}
.am-prose h3{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;margin:36px 0 12px;}
.am-prose h4{font-size:1.2rem;font-weight:700;margin:30px 0 10px;}
.am-prose h5,.am-prose h6{font-size:1.05rem;font-weight:700;margin:24px 0 8px;}

/* Body text */
.am-prose p{margin:0 0 20px;}
.am-prose strong,.am-prose b{color:var(--am-text-primary);font-weight:700;}
.am-prose em,.am-prose i{font-style:italic;}
.am-prose small{font-size:.85em;color:var(--am-text-muted);}
.am-prose hr{border:none;border-top:1px solid var(--am-border);margin:40px 0;}

/* Links — brand red */
.am-prose a{
  color:var(--am-primary-text); /* AA red for body-size link text */
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  transition:color .2s;}
.am-prose a:hover{color:#c41010;}

/* Lists */
.am-prose ul,.am-prose ol{margin:0 0 22px;padding-left:26px;}
.am-prose ul{list-style:none;padding-left:0;}
.am-prose ul li{position:relative;padding-left:28px;}
.am-prose ul li::before{
  content:'';position:absolute;left:4px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--am-primary);}
.am-prose ol{list-style:decimal;}
.am-prose ol li::marker{color:var(--am-primary);font-weight:700;}
.am-prose li{margin-bottom:9px;line-height:1.7;}
.am-prose li > ul,.am-prose li > ol{margin:9px 0 0;}

/* Blockquote */
.am-prose blockquote{
  margin:28px 0;padding:18px 26px;
  border-left:4px solid var(--am-primary);
  background:var(--am-gray-bg);
  border-radius:0 var(--am-radius-sm) var(--am-radius-sm) 0;
  font-style:italic;color:var(--am-text-primary);}
.am-prose blockquote p:last-child{margin-bottom:0;}

/* Code */
.am-prose code{
  background:var(--am-gray-bg);padding:2px 7px;border-radius:6px;
  font-size:.9em;font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--am-text-primary);}
.am-prose pre{
  background:var(--am-dark);color:#f5f5f5;
  padding:20px 22px;border-radius:var(--am-radius-md);
  overflow-x:auto;margin:24px 0;line-height:1.6;}
.am-prose pre code{background:none;padding:0;color:inherit;font-size:14px;}

/* Images & figures — responsive, rounded */
.am-prose img{
  max-width:100%;height:auto;display:block;
  border-radius:var(--am-radius-img);margin:26px auto;}
.am-prose figure{margin:26px 0;}
.am-prose figure img{margin:0 auto;}
.am-prose figcaption{
  margin-top:10px;text-align:center;
  font-size:13px;color:var(--am-text-muted);}
.am-prose iframe,.am-prose video{
  max-width:100%;border-radius:var(--am-radius-md);margin:26px 0;display:block;}

/* Tables — styled like .am-comparison */
.am-prose table{
  width:100%;border-collapse:collapse;
  margin:28px 0;font-size:15px;
  border-radius:var(--am-radius-md);overflow:hidden;
  box-shadow:var(--am-shadow-card);}
.am-prose thead th,.am-prose th{
  background:var(--am-dark);color:#fff;
  font-family:var(--am-font-head);font-weight:700;
  text-align:left;padding:14px 16px;}
.am-prose td{
  padding:13px 16px;border-bottom:1px solid var(--am-border);
  color:var(--am-text-body);}
.am-prose tbody tr:nth-child(even) td{background:var(--am-gray-bg);}
.am-prose .am-prose__table-wrap,
.am-prose .wp-block-table{overflow-x:auto;}

/* Buttons — WP button blocks / .wp-block-button → red pill (style only) */
.am-prose .wp-block-button__link,
.am-prose .btn,
.am-prose a.button,
.am-prose .wp-element-button{
  display:inline-block;
  background:var(--am-primary);color:#fff;
  padding:13px 30px;border-radius:var(--am-radius-pill);
  font:800 15px var(--am-font-head);letter-spacing:.5px;
  text-decoration:none;border:none;
  box-shadow:var(--am-shadow-cta);
  transition:transform .2s,box-shadow .2s;}
.am-prose .wp-block-button__link:hover,
.am-prose .btn:hover,
.am-prose a.button:hover,
.am-prose .wp-element-button:hover{
  color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 40px rgba(244,34,34,.55);}

.am-prose > *:first-child{margin-top:0;}
.am-prose > *:last-child{margin-bottom:0;}

@media (max-width:768px){
  .am-prose{font-size:16px;}
}

/* ============================================================================
   5. CTA BAND (CtaBand.astro)
   Builds on .am-final-cta from apnamechanic-premium.css; this only centers the
   inner content for the standalone band layout.
   ========================================================================== */
.am-cta-band .rh-container{max-width:900px;margin:0 auto;padding:0 20px;text-align:center;}

/* ============================================================================
   6. ARCHIVE / LISTING UTILITIES (.am-archive*)
   Reusable card-grid for blog/bikes/cars/jobs listing + archive pages.
   ========================================================================== */
.am-archive{max-width:1180px;margin:0 auto;padding:48px 20px;}
.am-archive__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;}
.am-archive__grid--2{grid-template-columns:repeat(2,1fr);}
.am-archive__grid--4{grid-template-columns:repeat(4,1fr);}

/* Generic listing card (reuses .am-blog-card visuals; alias for clarity) */
.am-archive__card{
  background:#fff;border:1px solid var(--am-border);
  border-radius:var(--am-radius-md);overflow:hidden;
  box-shadow:var(--am-shadow-card);
  transition:box-shadow .2s,transform .2s;
  display:flex;flex-direction:column;}
.am-archive__card:hover{box-shadow:var(--am-shadow-card-hover);transform:translateY(-2px);}
.am-archive__card-media{display:block;overflow:hidden;background:var(--am-gray-bg);}
.am-archive__card-media img{
  width:100%;height:190px;object-fit:cover;display:block;
  transition:transform .3s;}
.am-archive__card:hover .am-archive__card-media img{transform:scale(1.05);}
.am-archive__card-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;}
.am-archive__card-title{
  font:700 1.12rem/1.35 var(--am-font-head);
  color:var(--am-text-primary);margin:0 0 8px;}
.am-archive__card-title a{color:inherit;text-decoration:none;transition:color .2s;}
.am-archive__card-title a:hover{color:var(--am-primary);}
.am-archive__card-excerpt{
  color:var(--am-text-body);font-size:14px;line-height:1.6;flex:1;}
.am-archive__card-excerpt p{margin:0;}
.am-archive__card-meta{
  margin-top:14px;font-size:12px;color:var(--am-text-muted);
  display:flex;gap:12px;flex-wrap:wrap;}

/* Pagination */
.am-archive__pagination{
  display:flex;justify-content:center;align-items:center;
  gap:8px;flex-wrap:wrap;margin-top:48px;}
.am-archive__page{
  min-width:44px;height:44px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--am-border);border-radius:var(--am-radius-sm);
  background:#fff;color:var(--am-text-primary);
  font:600 14px var(--am-font-body);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;}
.am-archive__page:hover,
.am-archive__page--active{
  background:var(--am-primary);color:#fff;border-color:var(--am-primary);}
.am-archive__page--disabled{color:#757575;border-color:#c4c4c4;pointer-events:none;} /* AA, no opacity fade */

@media (max-width:960px){
  .am-archive__grid,
  .am-archive__grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .am-archive{padding:36px 18px;}
}
@media (max-width:560px){
  .am-archive__grid,
  .am-archive__grid--2,
  .am-archive__grid--4{grid-template-columns:1fr;}
}