/* Hair Clinic Dubai — Blog / Archive reference layout */

.hcd-blog-archive{
  --hcd-archive-gold:#af8f59;
  --hcd-archive-gold-soft:#c69e63;
  --hcd-archive-black:#000;
  --hcd-archive-text:#191919;
  width:100%;
  background:#fff;
  color:var(--hcd-archive-text);
  font-family:"Raleway",Arial,sans-serif;
  overflow:hidden;
}

.hcd-archive-container{
  width:min(1040px, calc(100% - 48px));
  margin:0 auto;
}

/* ================================================================
   1. ARCHIVE HERO — the single hero for /blog/, category and tag
   archives. Deliberately mirrors the single-post hero 1:1
   (hcd-single-post.css .hcd-post-hero) so both use the identical
   full-bleed, no-side-padding, diagonal-cut layout: dark teal
   overlay, centered title/subtitle/CTA, diagonal lower edge, and a
   real black section sibling underneath (not a background hack).

   A previous revision rendered a separate compact
   ".hcd-archive-titlebar" block above a boxed-in 390px hero with side
   padding — that caused a visible duplicate title and did not match
   the single-post hero. Both issues are fixed here.
   ================================================================ */
.hcd-archive-hero{
  position:relative;
  z-index:2;
  width:100%;
  height:70vh;
  min-height:640px;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#000;
}

.hcd-archive-hero__visual{
  position:absolute;
  inset:0;
  clip-path:polygon(0% 0%,100% 0%,100% 72%,73.5% 88.4%,0% 72%);
}

.hcd-archive-hero__bg{
  position:absolute;
  inset:0;
}

.hcd-archive-hero__bg--fallback{
  background:linear-gradient(135deg,#111 0%,#173b3b 100%);
}

.hcd-archive-hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hcd-archive-hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(19,57,57,.66);
}

.hcd-archive-hero__inner{
  position:absolute;
  z-index:2;
  top:34.7%;
  left:50%;
  width:min(1200px,90%);
  margin:0;
  padding:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  color:#fff;
}

.hcd-archive-hero__title{
  max-width:900px;
  margin:0 0 18px;
  font-family:"Crimson Text",Georgia,serif;
  font-size:clamp(1.9rem,3.4vw,3rem);
  font-weight:600;
  line-height:1.25;
  color:#fff;
}

.hcd-archive-hero__subtitle{
  max-width:700px;
  margin:0 0 8px;
  font-family:"Crimson Text",Georgia,serif;
  font-style:italic;
  font-size:1.125rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
}

.hcd-archive-hero__button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:235px;
  height:44px;
  margin:20px auto 0;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(10,20,20,.12);
  color:rgba(255,255,255,.95);
  text-decoration:none;
  text-transform:uppercase;
  font-family:"Raleway",Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  transition:background 180ms ease,color 180ms ease;
}

.hcd-archive-hero__button:hover{
  background:rgba(255,255,255,.9);
  color:#173b3b;
}

/* Real sibling element (not a background hack) — identical to the
   single-post .hcd-post-black-section. */
.hcd-archive-hero-black{
  position:relative;
  z-index:1;
  height:25vh;
  min-height:180px;
  margin-top:-1px;
  background:#000;
}

/* ================================================================
   2. NINE-POST GRID
   ================================================================ */
.hcd-archive-content{
  position:relative;
  z-index:2;
  padding:24px 0 68px;
  background:#fff;
}

.hcd-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:20px;
  row-gap:34px;
}

.hcd-archive-card{
  min-width:0;
  background:#fff;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.10);
  transition:transform .2s ease,box-shadow .2s ease;
}

.hcd-archive-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.13);
}

.hcd-archive-card__image{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1.72 / 1;
  overflow:hidden;
  background:#eee;
}

.hcd-archive-card__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .35s ease;
}

.hcd-archive-card:hover .hcd-archive-card__image img{
  transform:scale(1.025);
}

.hcd-archive-card__fallback{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#e8e2d8,#c69e63);
}

.hcd-archive-card__body{
  padding:12px 15px 20px;
  text-align:center;
}

.hcd-archive-card__meta{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0;
  color:#111;
  font-family:"Raleway",Arial,sans-serif;
  font-size:.58rem;
  line-height:1.35;
  font-weight:600;
}

.hcd-archive-card__meta span{color:#111;}

.hcd-archive-card__ornament{
  margin:4px 0 6px;
  color:var(--hcd-archive-gold-soft);
  font-family:Georgia,serif;
  font-size:.95rem;
  line-height:.8;
  letter-spacing:1px;
}

.hcd-archive-card h2{
  margin:0 0 11px;
  font-family:"Crimson Text",Georgia,serif;
  font-size:clamp(1.15rem,1.3vw,1.5rem);
  line-height:1.08;
  font-weight:700;
  color:var(--hcd-archive-gold);
}

.hcd-archive-card h2 a{
  color:var(--hcd-archive-gold);
  text-decoration:none;
}

.hcd-archive-card h2 a:hover{
  color:#92723f;
}

.hcd-archive-card p{
  margin:0;
  color:#4b4b4b;
  font-family:"Raleway",Arial,sans-serif;
  font-size:.68rem;
  line-height:1.55;
  font-weight:400;
}

/* ================================================================
   3. PAGINATION
   ================================================================ */
.hcd-archive-pagination{
  margin-top:42px;
  text-align:center;
}

.hcd-archive-pagination ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  list-style:none;
  margin:0;
  padding:0;
}

.hcd-archive-pagination li{
  margin:0;
  padding:0;
  list-style:none;
}

.hcd-archive-pagination a,
.hcd-archive-pagination span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 7px;
  border:1px solid #dedede;
  background:#fff;
  color:#222;
  font-family:"Raleway",Arial,sans-serif;
  font-size:.58rem;
  text-decoration:none;
}

.hcd-archive-pagination a:hover,
.hcd-archive-pagination .current{
  background:#000;
  border-color:#000;
  color:#fff;
}

.hcd-archive-empty{
  padding:70px 20px;
  text-align:center;
}

.hcd-archive-empty h2{
  margin:0 0 10px;
  font-family:"Crimson Text",Georgia,serif;
  color:#111;
}

.hcd-archive-empty p{margin:0;color:#666;}

/* Keep requested site typography available to archive content without
   applying a restrictive max-width to the whole document. */
.hcd-blog-archive h1{font-size:clamp(2rem,1.5rem + 2.5vw,3rem);}
.hcd-blog-archive h2{font-size:clamp(1.625rem,1.25rem + 1.8vw,2.25rem);}
.hcd-blog-archive h3{font-size:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);}
.hcd-blog-archive h4{font-size:clamp(1.15rem,1rem + .75vw,1.35rem);}
.hcd-blog-archive h5{font-size:clamp(1rem,.95rem + .4vw,1.1rem);}
.hcd-blog-archive h6{font-size:clamp(.875rem,.85rem + .2vw,1rem);}

/* Re-apply archive-specific display sizes after the global clamp system. */
.hcd-archive-hero__title{font-size:clamp(1.9rem,3.4vw,3rem);}
.hcd-archive-card h2{font-size:clamp(1.15rem,1.3vw,1.5rem);}

@media (max-width:900px){
  .hcd-archive-container{width:min(720px,calc(100% - 40px));}
  .hcd-archive-hero{height:70vh;min-height:560px;}
  .hcd-archive-hero__visual{clip-path:polygon(0% 0%,100% 0%,100% 72%,73.5% 88.4%,0% 72%);}
  .hcd-archive-hero__inner{top:32%;width:88%;}
  .hcd-archive-hero__title{font-size:clamp(24px,4.5vw,38px);line-height:1.3;}
  .hcd-archive-hero__button{margin-top:24px;}
  .hcd-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:620px){
  .hcd-archive-container{width:calc(100% - 28px);}
  .hcd-archive-hero{height:70vh;min-height:540px;}
  .hcd-archive-hero__inner{top:27%;}
  .hcd-archive-hero__title{font-size:25px;line-height:1.35;}
  .hcd-archive-hero__subtitle{font-size:1rem;}
  .hcd-archive-hero__button{width:210px;height:42px;font-size:11px;}
  .hcd-archive-content{padding:20px 0 54px;}
  .hcd-archive-grid{grid-template-columns:1fr;row-gap:24px;}
  .hcd-archive-card__body{padding:12px 17px 20px;}
  .hcd-archive-card h2{font-size:1.5rem;}
  .hcd-archive-card p{font-size:.76rem;}
}


/* ================================================================
   FINAL ARCHIVE CLEANUP — Avada chrome + card typography
   ================================================================ */
/* archive.php is the complete archive page; Avada's native page-title
   bar must not appear above it and create a duplicate hero. */
.hcd-blog-archive ~ .fusion-page-title-bar,
.fusion-page-title-bar,
.fusion-page-title-bar-container,
.fusion-page-title-row,
.fusion-page-title-wrapper,
.fusion-page-title-captions{
  /* This stylesheet is only enqueued on Blog/archive templates. */
}
/* Hide the native Avada page-title bar safely on archive templates. */
body.archive .fusion-page-title-bar,
body.blog .fusion-page-title-bar,
body.category .fusion-page-title-bar,
body.tag .fusion-page-title-bar,
body.archive .fusion-page-title-bar-container,
body.blog .fusion-page-title-bar-container,
body.category .fusion-page-title-bar-container,
body.tag .fusion-page-title-bar-container{
  display:none !important;
}

/* Keep the archive card titles compact and independent from global h2 rules. */
.hcd-blog-archive .hcd-archive-card h2,
.hcd-blog-archive .hcd-archive-card h2 a{
  font-family:"Crimson Text",Georgia,serif !important;
  font-size:1.5rem !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
.hcd-blog-archive .hcd-archive-card h2{
  margin:0 0 11px !important;
}
.hcd-blog-archive .hcd-archive-card p{
  font-family:"Raleway",Arial,sans-serif !important;
  font-size:.75rem !important;
  line-height:1.55 !important;
}

@media (max-width:900px){
  .hcd-blog-archive .hcd-archive-card h2,
  .hcd-blog-archive .hcd-archive-card h2 a{font-size:1.4rem !important;}
}
@media (max-width:620px){
  .hcd-blog-archive .hcd-archive-card h2,
  .hcd-blog-archive .hcd-archive-card h2 a{font-size:1.5rem !important;}
}


/* FINAL ARCHITECTURE FIX: archive.php is standalone, so Avada's titlebar/header
   cannot be inserted before the HCD archive hero. Keep card typography isolated
   from every global/Avada heading rule. */
.hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title,
.hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title a{
  font-family:"Crimson Text",Georgia,serif !important;
  font-size:1.5rem !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  margin:0 0 11px !important;
  padding:0 !important;
  color:#af8f59 !important;
}
.hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title a{
  display:inline !important;
  text-decoration:none !important;
}
.hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__body{
  min-width:0 !important;
}
@media (max-width:900px){
  .hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title,
  .hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title a{font-size:1.35rem !important;}
}
@media (max-width:620px){
  .hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title,
  .hcd-avada-archive-page .hcd-blog-archive .hcd-archive-card__title a{font-size:1.5rem !important;}
}

/* ================================================================
   FINAL ARCHIVE HERO SYSTEM v2.0 — 90vh IMAGE / 10vh BLACK
   Applies to Blog, category and tag archives.
   ================================================================ */
body.hcd-avada-archive-page .hcd-archive-hero,
.hcd-blog-archive .hcd-archive-hero{
  height:70vh !important;
  min-height:0 !important;
  max-height:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__visual,
.hcd-blog-archive .hcd-archive-hero__visual{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  clip-path:polygon(0 0,100% 0,100% 90%,73.5% 100%,0 90%) !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__bg,
body.hcd-avada-archive-page .hcd-archive-hero__img,
body.hcd-avada-archive-page .hcd-archive-hero__overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__img{
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__inner{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  margin:0 !important;
  padding:0 5% !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__content{
  width:min(1200px,100%) !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

body.hcd-avada-archive-page .hcd-archive-hero__content > *{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

body.hcd-avada-archive-page .hcd-archive-hero-black{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  height:10vh !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
}

@media (max-width:900px){
  body.hcd-avada-archive-page .hcd-archive-hero{height:70vh !important;min-height:0 !important;}
  body.hcd-avada-archive-page .hcd-archive-hero__inner{inset:0 !important;width:100% !important;padding:0 6% !important;}
  body.hcd-avada-archive-page .hcd-archive-hero-black{height:10vh !important;}
}

@media (max-width:620px){
  body.hcd-avada-archive-page .hcd-archive-hero{height:70vh !important;min-height:0 !important;}
  body.hcd-avada-archive-page .hcd-archive-hero__visual{clip-path:polygon(0 0,100% 0,100% 92%,72% 100%,0 92%) !important;}
  body.hcd-avada-archive-page .hcd-archive-hero__inner{inset:0 !important;padding:0 5% !important;}
  body.hcd-avada-archive-page .hcd-archive-hero-black{height:10vh !important;min-height:0 !important;}
}