/*
  Talent · Establishment public page (R5) — migrated from the canonical mockup
  app/views/mockups/talent/establishment.html.erb (inline <style> + scattered
  inline style= attributes). Zero inline CSS: every literal style= value below
  is a semantic class here. Tailwind utilities still carry the layout/spacing;
  these classes carry colors/gradients/borders the mockup hardcoded inline.
  Dynamic per-record values (cover/avatar/video URLs) ride on data-attrs or img
  src (justified dynamic). Source de vérité graphique : Figma 08/04/26.
*/

/* Full-bleed: on neutralise le gutter horizontal du conteneur applicatif
   (max-w-7xl + px-*) ET le padding vertical, pour que le hero atteigne les bords
   du viewport et passe SOUS la navbar flottante (effet immersif, comme la
   maquette et les pages profil). Le contenu se recentre via ses propres
   conteneurs (max-w-[1312px] mx-auto).
   NB : l'ancienne approche `margin: calc(50% - 50vw)` ne fonctionnait pas car
   `.est-page { width: 100% }` empêchait l'élément de s'élargir → hero collé à
   gauche. */
main:has(.est-page) { max-width: none; padding: 0; }
.est-page, .est-page--bleed { width: 100%; margin-left: 0; margin-right: 0; }

.est-root { background: #FFFFFF; }

.est-playfair { font-family: 'Playfair Display', serif; }
/* Explicit centering for the modal <dialog> (showModal); native centering was
   unreliable (pinned top-left). No transformed ancestor → fixed = viewport. */
.est-video-dialog { border: none; position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

/* ── Section heads → editorial (eyebrow gold + Playfair gold title) ── */
.est-sec-head { display: block; margin-bottom: 22px; }
.est-sec-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.3px; color: #A38543;
}
.est-eyebrow {
  display: block; font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; line-height: 1;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #C4A559; margin-bottom: 7px;
}

/* ── Hero ── */
.est-hero-scrim {
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 50%, rgba(0,0,0,.1));
}
.est-logo-frame { border: 2px solid rgba(255,255,255,.2); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.est-hero-rule { background: rgba(255,255,255,.2); }

.est-badge-glass {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
}
.est-badge-palace { background: linear-gradient(180deg, #E5D4A0, #D4BC7A); color: #6B5521; }
.est-badge-outline { border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }

/* Michelin chip (red pill) — reused across hero, restaurant card, team, etc. */
.est-michelin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 100px;
  background: #C0392B; color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; vertical-align: middle;
}
.est-michelin--lg {
  padding: 6px 11px; border-radius: 9999px; font-size: 11px; gap: 4px;
}

/* Hero carousel control cluster */
.est-carousel { background: rgba(255,255,255,.75); backdrop-filter: blur(4px); }
.est-carousel-btn {
  background: linear-gradient(180deg, #C4A855, #8B7332); color: #fff;
}
.est-dot-active { background: #A38543; }

/* ── Tab bar ── */
.est-tabbar { background: #FFFFFF; }
.est-tabs-shell { background: #FFFFFF; border: 1px solid rgba(0,0,0,.06); }
.est-tab--active { background: linear-gradient(328deg, rgb(66,45,5) 25%, rgb(33,23,0) 87%); }
.est-tab-count { color: #A38543; }

/* ── Vision / quote ── */
.est-play {
  background: rgba(255,255,255,.3); backdrop-filter: blur(4px);
  transition: background .15s;
}
.est-play:hover { background: rgba(255,255,255,.4); }
.est-quote-card { border: 1px solid #E5E5E5; }
.est-quote-text { font-family: 'Playfair Display', serif; }
.est-quote-attr { color: #A38543; }

/* ── À propos / spa / hotel tags ── */
.est-tag {
  border: 1px solid #E5E5E5; background: #fff;
}
.est-tag-icon { color: #A38543; display: inline-flex; }

/* ── Restaurant card ── */
.est-card { border: 1px solid rgba(0,0,0,.04); }
.est-card-michelin-overlay { box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 100px; }
.est-chef-bar {
  border: 1px solid rgba(201,165,74,.35);
  background: rgba(201,165,74,.16);
}
.est-chef-avatar { border: 2px solid var(--brand-gold-200, #E5D4A0); }
.est-toggle-more { border: 1px solid rgba(0,0,0,.06); background: #FAFAFA; }
.est-toggle-more:hover { background: #F5F5F5; }

/* ── Award badge (Meilleur Spa / Relais & Châteaux) ── */
.est-award {
  background: rgba(184,151,90,.10);
  border: 1px solid rgba(184,151,90,.30);
  color: #8C6D34;
}
.est-room-card { border: 1px solid #E5E5E5; }

/* ── Team cards ── */
.est-team-card { border: 1px solid rgba(0,0,0,.03); background: #FAFAFA; }
.est-team-role { color: #C4A559; }
.est-team-actions { border-top: 1px solid rgba(0,0,0,.06); }
/* Suivre / Connecter — design du mockup, grisés (réseau = Brique 4). */
.est-team-btn-follow { border: 1px solid #A38543; color: #A38543; background: transparent; }
.est-team-btn-connect { color: #000; background: linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%); }
.est-team-btn-follow[disabled], .est-team-btn-connect[disabled] { opacity: .5; cursor: not-allowed; }
.est-btn-follow { border: 1px solid #A38543; color: #A38543; background: transparent; }
.est-btn-follow:hover { background: rgba(163,133,67,.06); }
.est-btn-connect {
  background: linear-gradient(135deg, #C4A559 0%, #D4BC7A 40%, #E5D4A0 70%, #EFE2B8 100%);
  color: #000;
}

/* ── Open positions ── */
.est-pos-card { border: 1px solid #E5E5E5; background: #fff; }
.est-status {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
  white-space: nowrap;
}
.est-status-green { background: rgba(46,125,50,.08); border: 1px solid rgba(46,125,50,.35); color: #2E7D32; }
.est-status-orange { background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.40); color: #C2700A; }
.est-pos-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #A38543;
  white-space: nowrap; transition: color .15s;
}
.est-pos-link:hover { color: #8C6D34; }

/* ── Sidebar ── */
.est-cta-card {
  background: linear-gradient(160deg, #FBF1D6 0%, #F1E1B6 100%);
  border: 1px solid rgba(184,151,90,.25);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.est-cta-pattern { opacity: .45; mix-blend-mode: multiply; }
.est-cta-lead { color: #6B5E3E; }
.est-cta-primary {
  background: linear-gradient(135deg, #C4A559 0%, #D4BC7A 40%, #E5D4A0 70%, #D4BC7A 100%);
  color: #fff; border: none; cursor: pointer; transition: filter .15s;
}
.est-cta-primary:hover { filter: brightness(1.05); }
/* Contacter l'établissement — Brique 3 (visible, grayed, non-functional). */
.est-cta-secondary {
  border: 1px solid rgba(0,0,0,.10); color: #383838; background: #fff;
  position: relative; cursor: not-allowed; opacity: .55;
}
.est-brique-tag {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: #A38543;
}

.est-info-card { background: #fffdfa; border: 1px solid #f8f4ed; }
.est-info-icon { color: #A38543; }
.est-info-label { color: #6b7280; }
.est-info-value { color: #1a1a1a; }
.est-info-value--link { color: #2563EB; text-decoration: underline; }

.est-distinction-card { background: #fffdfa; border: 1px solid #f8f4ed; }
.est-distinction {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9999px;
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  background: rgba(229,212,160,.3); color: #8B7355; border: 1px solid #E5D4A0;
}

/* ── Hors Brique 1 : blocs grisés + badge « À venir » (la vraie data vit
   ailleurs ; ces sections n'ont pas encore de modèle). ── */
.est-soon { filter: grayscale(.9); opacity: .5; pointer-events: none; }
.est-soon-badge {
  display: inline-flex; align-items: center; margin-left: 10px; vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: #1C1A17; color: #E8D49A; border: 1px solid rgba(196,165,89,.35);
}

/* Avatar équipe en initiales (pas de photo d'inconnu) — le gradient vient de
   team_member_gradient via background-image inline. */
.est-team-initials { color: #fff; font-family: 'Playfair Display', serif; font-weight: 800; }
.est-team-initials > span { font-size: 30px; line-height: 1; }

/* ══ GALERIE — carrousel (points + flèches) ══ */
.est-gallery-dot { width: 8px; height: 6px; border-radius: 9999px; background: rgba(255,255,255,.4); transition: width .3s ease, background .3s ease; }
.est-gallery-dot.is-active { width: 32px; background: #fff; }
.est-gallery-arrow { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); transition: background .15s; }
.est-gallery-arrow:hover { background: rgba(255,255,255,.3); }