/* About page scoped styles */

/* Hero media (image replacing video) */
#page-about .hero-background .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none; /* override potential video centering */
  opacity: 1; /* ensure full contrast (video style was 0.8) */
  display: block;
}

/* Keep hero subtitle visual intact but move styles out of inline */
#page-about .hero .hero-subtitle { color: #fff; text-align: left; font-weight: 400; max-width: 1000px; }
#page-about .hero { min-height: 60vh; }
/* H1 highlight for About */
#page-about .hero h1 span { color: var(--primary); background: none; -webkit-text-fill-color: initial; font-weight: 900; }
/* Desktop-only line break in subtitle */
#page-about .br-desktop { display: none; }
@media (min-width: 1024px) { #page-about .br-desktop { display: block; } }
/* Renforcer le contraste du hero About (overlay plus sombre) */
#page-about .hero .hero-gradient {
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.65) 0%,
    rgba(10,10,10,0.50) 50%,
    rgba(10,10,10,0.88) 100%
  );
}

/* Section intro layout aligned with Réalisations text frame (scoped) */
#page-about.section-intro, /* if page class accidentally on section */
#page-about .section-intro {
  background: var(--bg-primary);
  padding: 2rem 0 1rem 0;
}
#page-about .section-intro .section-header { margin-bottom: 1.5rem; }
#page-about .text-container-responsive { max-width: 1400px; margin: 0 auto 1rem auto; padding: 0 2rem; }
#page-about .text-frame-responsive {
  background: var(--bg-secondary);
  border-radius: 15px;
  padding: 1.2rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(var(--color-primary-rgb),0.25);
}
#page-about .text-frame-responsive p { color: var(--text-secondary); line-height: 1.5; font-size: 1rem; margin: 0 0 .8rem 0; text-align: center; }
#page-about .text-frame-responsive p:last-child { margin-bottom: 0; }
/* Strong primary inline highlights inside story */
#page-about .text-primary-strong { color: var(--primary); font-weight: 700; }

/* Story layout (About) — text left, image right; stacks on mobile */
#page-about .story-layout { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 2.5rem; }
#page-about .story-content { flex: 1 1 0; min-width: 0; }
#page-about .story-image { flex: 0 0 520px; text-align: center; position: relative; border-radius: 12px; }
#page-about .story-image img { width: 100%; height: 360px; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.3); }

@media (max-width: 1200px) {
  #page-about .story-layout { gap: 2rem; }
  #page-about .story-image { flex-basis: 480px; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  #page-about .story-layout { flex-direction: column; gap: 2rem; }
  #page-about .story-image { flex: none; width: 100%; }
  #page-about .story-image img { height: 400px; }
}
@media (max-width: 768px) {
  /* Stack: text on top, image below with comfortable margins (container already pads inline) */
  #page-about .story-layout { flex-direction: column; gap: 1.75rem; }
  #page-about .story-image { flex: none; width: 100%; }
  #page-about .story-image img { height: 240px; }
}

/* Team avatar images fill the circular frame */
#page-about .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* TEAM — Responsive layout rules (Grid-based for precise rows) */
#page-about .team-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; justify-content: center; }
#page-about .team-grid .team-card { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Uniform card sizing per breakpoint using clamp (fluid, non-fixed) */
@media (min-width: 968px) {
  /* Desktop: two independent centered rows */
  #page-about .team-grid { display: grid; row-gap: 2rem; }
  #page-about .team-row { display: flex; justify-content: center; gap: 2rem; }
  #page-about .team-row .team-card { width: clamp(300px, 32vw, 360px); min-height: clamp(440px, 28vw, 520px); }
}

/* Prevent avatar/card clipping when container is narrow (968–1182px) */
@media (min-width: 968px) and (max-width: 1182px) {
  #page-about .team-card.card { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (min-width: 769px) and (max-width: 967px) {
  /* Tablet: 2 columns with regular gaps; maintain order 2 / 2 / 1 centered */
  #page-about .team-grid { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 1.5rem; justify-content: center; }
  /* Flatten rows so cards become grid items */
  #page-about .team-row { display: contents; }
  /* Uniform sizing */
  #page-about .team-grid .team-card { height: clamp(440px, 42vw, 520px); min-height: 0; width: 100%; }
  /* Eva centered on row 3 */
  #page-about .team-grid .team-card:nth-of-type(5) { grid-column: 1 / -1; justify-self: center; max-width: min(520px, 100%); }
}
@media (max-width: 768px) {
  /* Mobile: stacked with consistent spacing */
  #page-about .team-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  #page-about .team-row { display: contents; }
  #page-about .team-grid .team-card { width: 100%; min-height: clamp(420px, 90vw, 540px); }
}

/* Flex-based rules removed in favor of precise grid placement */

/* Portrait vertical alignment tweaks (avoid top crop) */
#page-about .team-grid .team-card:nth-child(1) .team-avatar img,
#page-about .team-grid .team-card:nth-child(2) .team-avatar img,
#page-about .team-grid .team-card:nth-child(3) .team-avatar img,
#page-about .team-grid .team-card:nth-child(4) .team-avatar img { object-position: 50% 42%; }

/* Sebastien's portrait — recentered on face */
#page-about .team-grid .team-card:nth-child(1) .team-avatar img { object-position: 38% 30%; }

/* Process/Values: enforce 2x2 between 968px and 1279px */
@media (min-width: 968px) and (max-width: 1279px) {
  #page-about .process-grid,
  #page-about .values-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    justify-content: center;
  }
}

/* CTA – reuse Services visual language but scoped */
#page-about .cta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#page-about .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 12px; text-decoration: none; font-weight: 700; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease; }
#page-about .btn--primary { background: var(--primary); color: var(--text-on-primary); }
#page-about .btn--primary:hover { filter: brightness(1.1); }
#page-about .btn--ghost { background: transparent; color: var(--text-primary); border-color: rgba(255, 255, 255, 0.18); }
#page-about .btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }

/* Vertical rhythm adjustments (light touch; no visual redesign) */
#page-about .section-header { margin-bottom: 2rem; }
#page-about .team-grid { margin-top: 2.5rem; }
#page-about .values-grid { margin-top: 1.5rem; }
#page-about .value-icon { color: var(--primary); font-weight: 700; }

/* Air supplémentaire gauche/droite dans les cartouches (comme le cadre texte) */
#page-about .card { 
  padding-left: calc(2.5rem + 0.75rem);
  padding-right: calc(2.5rem + 0.75rem);
}
#page-about .process-step { 
  padding-left: calc(5rem + 0.5rem);
  padding-right: calc(2rem + 0.5rem);
}

@media (max-width: 640px) {
  #page-about .card { 
    padding-left: calc(2rem + 0.5rem);
    padding-right: calc(2rem + 0.5rem);
  }
  #page-about .process-step { 
    padding-left: calc(5rem + 0.25rem);
    padding-right: calc(2rem + 0.25rem);
  }
}

/* Plus d'espace côté écran autour des cartouches (mobile) */
@media (max-width: 768px) {
  #page-about .team-grid,
  #page-about .process-grid,
  #page-about .values-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* (old grid gallery styles removed in favor of horizontal gallery) */

/* Full-bleed background bands for About */
#page-about .section.bg-primary,
#page-about .section.bg-secondary,
#page-about .section.bg-tertiary { position: relative; z-index: 0; overflow: visible; }
#page-about .section.bg-primary::before,
#page-about .section.bg-secondary::before,
#page-about .section.bg-tertiary::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
}
#page-about .section.bg-primary::before { background: var(--bg-primary); }
#page-about .section.bg-secondary::before { background: var(--bg-secondary); }
#page-about .section.bg-tertiary::before { background: var(--bg-tertiary); }

/* Embla Carousel styles (scoped to About) */
#page-about .embla { position: relative; --slide-gap: 20px; }
#page-about .embla__viewport { overflow: hidden; padding: 0 2rem; }
#page-about .embla__container { display: flex; gap: var(--slide-gap); }
#page-about .embla__slide { flex: 0 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); background: var(--bg-secondary); box-shadow: 0 10px 30px var(--shadow-color); }
#page-about .embla__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Slide sizing and peek effect */
@media (max-width: 580px) {
  #page-about .embla__slide { width: 80vw; aspect-ratio: 4 / 3; }
  #page-about .embla { --slide-gap: 12px; }
}
@media (min-width: 581px) and (max-width: 1023px) {
  #page-about .embla__slide { width: 60vw; aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  #page-about .embla__slide { width: clamp(56rem, 60vw, 64rem); aspect-ratio: 16 / 9; }
}

/* Nav buttons below the viewport */
#page-about .embla { text-align: center; }
#page-about .embla__button { position: static; transform: none; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; background: rgba(0,0,0,0.32); color: #fff; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: background .2s ease, transform .15s ease; }
#page-about .embla__button:hover { background: rgba(0,0,0,0.5); transform: scale(1.04); }
#page-about .embla__button:active { transform: scale(0.98); }
#page-about .embla__button--prev { margin-right: 8px; }
#page-about .embla__button--next { margin-left: 8px; }
#page-about .embla__button[disabled] { opacity: .4; cursor: default; pointer-events: none; }
/* Show arrows on mobile and desktop */
@media (max-width: 768px) { #page-about .embla__button { display: inline-flex; } }

/* Pagination dots removed (arrows only) */

/* Edge fade overlays */
#page-about .embla__fade { position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 2; }
#page-about .embla__fade--start { left: 0; background: linear-gradient(to right, rgba(10,10,10,0.8), rgba(10,10,10,0)); }
#page-about .embla__fade--end { right: 0; background: linear-gradient(to left, rgba(10,10,10,0.8), rgba(10,10,10,0)); }

@media (prefers-reduced-motion: reduce) {
  #page-about .embla__container { scroll-behavior: auto; }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  #page-about .text-container-responsive { padding: 0 1rem; }
  #page-about .text-frame-responsive { padding: 1rem 1.25rem; }
}