/* Dr Hera's Skin & Hair Clinic — dynamic section styles
   Palette pulled from the original page: gold + dark brown + cream. */
:root{
  --cs-gold:#d5a220; --cs-gold-2:#e9c15d; --cs-dark:#171203;
  --cs-cream:#f4eedf; --cs-muted:#b7ae9e; --cs-text:#2a2822;
  --cs-white:#ffffff; --cs-radius:16px; --cs-maxw:1180px;
  --cs-shadow:0 10px 30px rgba(23,18,3,.08);
}
.cs-section{padding:72px 0;}
.cs-section:nth-child(even){background:var(--cs-cream);}
.cs-container{max-width:var(--cs-maxw);margin:0 auto;padding:0 20px;}
.cs-container--narrow{max-width:820px;}
.cs-eyebrow{display:inline-block;color:var(--cs-gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:.6rem;}
.cs-section__title{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;color:var(--cs-dark);margin:0 0 .6rem;}
.cs-section__intro{color:var(--cs-text);max-width:720px;margin:0 0 2rem;}
.cs-rich p{margin:0 0 1rem;color:var(--cs-text);line-height:1.7;}

/* buttons */
.cs-btn{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;transition:.2s;border:2px solid transparent;}
.cs-btn--primary{background:linear-gradient(135deg,var(--cs-gold),var(--cs-gold-2));color:var(--cs-dark);}
.cs-btn--primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.cs-btn--outline{border-color:var(--cs-gold);color:var(--cs-dark);}
.cs-btn--outline:hover{background:var(--cs-gold);color:var(--cs-dark);}
/* On dark sections, outline button text must be light */
.cs-hero .cs-btn--outline,.cs-doctor .cs-btn--outline,.cs-appointment .cs-btn--outline{color:var(--cs-cream);border-color:var(--cs-gold-2);}
.cs-hero .cs-btn--outline:hover,.cs-doctor .cs-btn--outline:hover,.cs-appointment .cs-btn--outline:hover{color:var(--cs-dark);background:var(--cs-gold);}

/* hero */
.cs-hero{background:radial-gradient(1200px 500px at 80% -10%,rgba(213,162,32,.18),transparent),var(--cs-dark);color:var(--cs-cream);}
.cs-hero .cs-section__title,.cs-hero__title{color:var(--cs-cream);}
.cs-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.cs-hero__title{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;margin:.4rem 0 1rem;}
.cs-hero__sub{color:var(--cs-muted);font-size:1.1rem;margin-bottom:1.6rem;max-width:560px;}
.cs-hero__actions{display:flex;gap:14px;flex-wrap:wrap;}
.cs-hero__media img{width:100%;border-radius:var(--cs-radius);box-shadow:var(--cs-shadow);}

/* grids + cards */
.cs-grid{display:grid;gap:24px;}
.cs-grid--cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.cs-grid--reviews{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.cs-card{display:block;background:var(--cs-white);border:1px solid rgba(23,18,3,.06);border-radius:var(--cs-radius);padding:26px;text-decoration:none;color:inherit;box-shadow:var(--cs-shadow);transition:.2s;}
.cs-card:hover{transform:translateY(-4px);border-color:var(--cs-gold);}
.cs-card__icon img{width:52px;height:52px;object-fit:contain;margin-bottom:14px;}
.cs-card__title{color:var(--cs-dark);font-size:1.2rem;margin:0 0 .5rem;}
.cs-card__text{color:var(--cs-text);margin:0;line-height:1.6;}
.cs-card--blog .cs-card__thumb img{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:14px;}

/* about */
.cs-about__grid,.cs-doctor__grid,.cs-appointment__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.cs-about__media img,.cs-doctor__media img{width:100%;border-radius:var(--cs-radius);box-shadow:var(--cs-shadow);}
.cs-stats{display:flex;gap:32px;flex-wrap:wrap;margin-top:24px;}
.cs-stat{display:flex;flex-direction:column;}
.cs-stat__value{font-size:2rem;font-weight:800;color:var(--cs-gold);}
.cs-stat__label{color:var(--cs-text);font-size:.9rem;}

/* doctor */
.cs-doctor{background:var(--cs-dark);color:var(--cs-cream);}
.cs-doctor .cs-doctor__name{color:var(--cs-cream);font-size:2rem;margin:.3rem 0;}
.cs-doctor__role{color:var(--cs-gold);font-weight:600;margin-bottom:1rem;}
.cs-doctor .cs-rich p{color:var(--cs-muted);}

/* patient steps */
.cs-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.cs-step{display:flex;gap:16px;background:var(--cs-white);border-radius:var(--cs-radius);padding:22px;box-shadow:var(--cs-shadow);}
.cs-step__num{flex:0 0 40px;height:40px;width:40px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--cs-gold),var(--cs-gold-2));color:var(--cs-dark);font-weight:800;}
.cs-step__title{margin:0 0 .3rem;color:var(--cs-dark);font-size:1.05rem;}
.cs-step__text{margin:0;color:var(--cs-text);font-size:.95rem;}

/* reviews */
.cs-review{margin:0;background:var(--cs-white);border-radius:var(--cs-radius);padding:26px;box-shadow:var(--cs-shadow);border:1px solid rgba(23,18,3,.06);}
.cs-review__stars{color:var(--cs-gold);font-size:1.1rem;letter-spacing:2px;margin-bottom:.6rem;}
.cs-review__text{margin:0 0 1rem;color:var(--cs-text);font-style:italic;line-height:1.6;}
.cs-review__name{font-weight:700;color:var(--cs-dark);}

/* chips (other services) */
.cs-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px;}
.cs-chip{display:inline-block;padding:.6rem 1.1rem;border-radius:999px;background:var(--cs-white);border:1px solid var(--cs-gold);color:var(--cs-dark);text-decoration:none;font-weight:600;transition:.2s;}
.cs-chip:hover{background:var(--cs-gold);}

/* faq */
.cs-faq__item{background:var(--cs-white);border:1px solid rgba(23,18,3,.08);border-radius:12px;padding:4px 20px;margin-bottom:12px;box-shadow:var(--cs-shadow);}
.cs-faq__q{cursor:pointer;font-weight:700;color:var(--cs-dark);padding:16px 0;list-style:none;}
.cs-faq__q::-webkit-details-marker{display:none;}
.cs-faq__item[open] .cs-faq__q{color:var(--cs-gold);}
.cs-faq__a{padding:0 0 16px;color:var(--cs-text);line-height:1.7;}

/* appointment */
.cs-appointment{background:var(--cs-dark);color:var(--cs-cream);}
.cs-appointment .cs-section__title{color:var(--cs-cream);}
.cs-appointment .cs-section__intro{color:var(--cs-muted);}
.cs-contact{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:10px;}
.cs-contact a{color:var(--cs-gold);text-decoration:none;}
.cs-appointment__form{background:var(--cs-white);border-radius:var(--cs-radius);padding:26px;color:var(--cs-text);}

@media(max-width:860px){
  .cs-hero__grid,.cs-about__grid,.cs-doctor__grid,.cs-appointment__grid{grid-template-columns:1fr;}
  .cs-hero__media{order:-1;}
  .cs-section{padding:52px 0;}
}

/* ------------------------------------------------------------------ */
/* GeneratePress overrides — make the Clinic Landing template          */
/* full-width (edge-to-edge) and remove default container padding.     */
/* ------------------------------------------------------------------ */
.page-template-page-clinic-landing #page,
.page-template-page-clinic-landing .grid-container{max-width:100%!important;padding-left:0!important;padding-right:0!important;}
.page-template-page-clinic-landing #content{display:block!important;flex-direction:column!important;padding:0!important;margin:0!important;}
.page-template-page-clinic-landing #primary,
.page-template-page-clinic-landing .content-area{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;}
.page-template-page-clinic-landing .inside-article{padding:0!important;}
.page-template-page-clinic-landing .entry-header,
.page-template-page-clinic-landing .page-hero,
.page-template-page-clinic-landing .entry-title{display:none!important;}

/* ================= New layouts: reels, banner, content, image+text, cta, gallery ================= */

/* YouTube Reels (vertical shorts grid) */
.cs-reels__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;}
.cs-reel{margin:0;background:var(--cs-white);border-radius:var(--cs-radius);overflow:hidden;box-shadow:var(--cs-shadow);border:1px solid rgba(23,18,3,.06);}
.cs-reel__frame{position:relative;width:100%;aspect-ratio:9/16;background:#000;}
.cs-reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cs-reel__cap{padding:12px 14px;font-weight:600;color:var(--cs-dark);font-size:.95rem;}
@supports not (aspect-ratio:9/16){.cs-reel__frame{padding-top:177%;}}

/* Inner-page banner */
.cs-banner{background:var(--cs-dark);color:var(--cs-cream);text-align:center;padding:80px 0;background-size:cover;background-position:center;}
.cs-banner--image{padding:110px 0;}
.cs-banner__title{color:var(--cs-cream);font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 .5rem;}
.cs-banner__sub{color:var(--cs-muted);font-size:1.1rem;margin:0;}

/* Content block */
.cs-content .cs-rich{color:var(--cs-text);line-height:1.75;}
.cs-content .cs-rich h2,.cs-content .cs-rich h3{color:var(--cs-dark);}

/* Image + Text */
.cs-imgtext__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.cs-imgtext--right .cs-imgtext__media{order:2;}
.cs-imgtext__media img{width:100%;border-radius:var(--cs-radius);box-shadow:var(--cs-shadow);}
.cs-imgtext__content .cs-btn{margin-top:1rem;}

/* CTA banner */
.cs-cta{background:linear-gradient(135deg,var(--cs-gold),var(--cs-gold-2));}
.cs-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.cs-cta__title{color:var(--cs-dark);margin:0 0 .3rem;font-size:1.6rem;}
.cs-cta__text{color:#4a3c12;margin:0;max-width:640px;}
.cs-cta .cs-btn--primary{background:var(--cs-dark);color:var(--cs-cream);}
.cs-cta .cs-btn--primary:hover{background:#000;}

/* Gallery */
.cs-gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.cs-gallery__item{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--cs-shadow);background:var(--cs-white);}
.cs-gallery__item img{width:100%;height:220px;object-fit:cover;display:block;}
.cs-gallery__item figcaption{padding:10px 12px;font-size:.9rem;color:var(--cs-text);}

@media(max-width:860px){
  .cs-imgtext__grid{grid-template-columns:1fr;}
  .cs-imgtext--right .cs-imgtext__media{order:0;}
  .cs-cta__inner{flex-direction:column;text-align:center;}
}