/* ==========================================================================
   Qasem Dentistry — Layout
   Grid, containers, breakpoints, section-level structure.
   ========================================================================== */

/* ---- Container ---- */

.container {
  width: 100%;
  max-width: var(--container-max-mobile);
  padding-inline: var(--side-padding-mobile);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-max-tablet);
    padding-inline: var(--side-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-max-desktop);
    padding-inline: var(--side-padding-desktop);
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: var(--container-max-large);
  }
}

/* ---- Section base ---- */

.section {
  padding-block: 48px;
  background-color: var(--bg-primary);
}

@media (min-width: 480px) {
  .section {
    padding-block: var(--section-padding-mobile);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-padding-desktop);
  }
}

.section--sand {
  background-color: var(--secondary-sand);
}

.section--dark {
  background-color: var(--bg-dark);
}

/* Specialist Approach uses larger padding per spec */
.section--approach {
  padding-block: 56px;
}

@media (min-width: 1024px) {
  .section--approach {
    padding-block: 120px;
  }
}

/* Specialist Approach: heading-to-paragraph and paragraph-to-paragraph
   spacing, scoped to this section only (does not affect the shared
   .text-block-centered class used by the FAQ heading or Final CTA). */
.section--approach h2 {
  margin-block-end: var(--space-3);
  line-height: 1.35;
}

.section--approach p {
  margin-block-end: var(--space-2);
}

.section--approach p:last-child {
  margin-block-end: 0;
}

@media (min-width: 1024px) {
  .section--approach h2 {
    margin-block-end: var(--space-4);
  }

  .section--approach p {
    margin-block-end: var(--space-3);
  }
}

/* Final CTA uses larger padding per spec */
.section--final-cta {
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .section--final-cta {
    padding-block: 140px;
  }
}

/* ---- Two-column split (Hero, Doctor Profile, Clinic Experience) ---- */

.split {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .split {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .split--image-45 > .split__media {
    flex: 0 0 45%;
  }

  .split--image-45 > .split__content {
    flex: 0 0 55%;
  }

  .split--image-40 > .split__media {
    flex: 0 0 40%;
  }

  .split--image-40 > .split__content {
    flex: 0 0 60%;
  }

  .split--image-60 > .split__media {
    flex: 0 0 60%;
  }

  .split--image-60 > .split__content {
    flex: 0 0 40%;
  }

  /* Reverse order for Clinic Experience (image right, text left of Doctor Profile) */
  .split--reverse {
    flex-direction: row-reverse;
  }
}

/* ---- Centered text block (Specialist Approach) ---- */

.text-block-centered {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 767px) {
  .text-block-centered p {
    text-align: start;
  }
}

/* ---- Image placeholder container ----
   Preserves exact aspect ratio + dimensions from the approved
   Image Placeholder Specification. No visible label, border, or icon —
   a clean neutral block matching the design system, ready for a real
   image to be dropped in without any markup or layout change.
*/

.img-placeholder {
  width: 100%;
  background-color: var(--secondary-sand);
  overflow: hidden;
}

.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero doctor portrait — 4:5 */
.img-placeholder--hero {
  aspect-ratio: 4 / 5;
}

/* Doctor Profile bio photo — 4:5 */
.img-placeholder--profile {
  aspect-ratio: 4 / 5;
}

/* Clinic interior — 16:9 */
.img-placeholder--clinic {
  aspect-ratio: 16 / 9;
}

/* Final CTA thumbnail — 1:1, circular */
.img-placeholder--thumbnail {
  aspect-ratio: 1 / 1;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-circle);
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .img-placeholder--thumbnail {
    width: 96px;
    height: 96px;
  }
}

/* ---- Grid: Areas of Expertise (2x2 desktop / stack mobile) ---- */

.expertise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1024px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: var(--space-6);
  }
}

/* ---- Grid: Patient Experiences (3 static columns desktop / stacked mobile) ---- */

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}


/* Clinic gallery — isolated, mobile-first, no impact outside clinic media */
.clinic-gallery { position:relative; width:100%; min-width:0; }
.clinic-gallery__track { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); background:var(--secondary-sand); }
.clinic-gallery__track::-webkit-scrollbar { display:none; }
.clinic-gallery__slide { flex:0 0 100%; aspect-ratio:16 / 9; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
.clinic-gallery__slide picture { display:block; width:100%; height:100%; }
.clinic-gallery__slide img { display:block; width:100%; height:100%; object-fit:cover; }
.clinic-gallery__counter { position:absolute; inset-inline-end:12px; bottom:12px; z-index:2; padding:5px 9px; border-radius:999px; background:rgba(20,20,20,.58); color:#fff; font-size:12px; line-height:1; font-weight:600; letter-spacing:.02em; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .clinic-gallery__track { scroll-behavior:auto; } }