/* ============================================================
   COMPONENTS
   Reusable UI primitives. These have no knowledge of which
   section they live in — layout context comes from sections.css.
   ============================================================ */

/* ─── LAYOUT UTILITIES ──────────────────────────────────────── */
.container {
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 32px;
}

.section {
   padding: var(--section-padding);
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */
.tag {
   display: inline-block;
   font-family: var(--ff-body);
   font-size: 0.7rem;
   font-weight: 500;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--clay);
   margin-bottom: 18px;
}

.section-title {
   font-family: var(--ff-display);
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 500;
   line-height: 1.18;
   color: var(--charcoal);
}

.section-title em {
   font-style: italic;
   color: var(--clay);
}

.section-subtitle {
   font-size: 1rem;
   line-height: 1.75;
   color: var(--stone);
   max-width: 520px;
}

.divider {
   width: 40px;
   height: 2px;
   background: var(--clay);
   margin: 20px 0;
}

.divider--center {
   margin-left: auto;
   margin-right: auto;
}

.title-dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   background: var(--clay);
   border-radius: 50%;
   vertical-align: middle;
   margin: 0 6px;
   position: relative;
   bottom: 2px;
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 30px;
   font-family: var(--ff-body);
   font-size: 0.82rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border-radius: 2px;
   transition: all 0.3s var(--ease-out);
}

.btn svg {
   width: 14px;
   height: 14px;
   transition: transform 0.3s var(--ease-out);
}

.btn:hover svg {
   transform: translateX(4px);
}

.btn-dark {
   background: var(--charcoal);
   color: var(--cream);
}

.btn-dark:hover {
   background: var(--clay);
   transform: translateY(-2px);
}

.btn-outline {
   border: 1.5px solid var(--charcoal);
   color: var(--charcoal);
}

.btn-outline:hover {
   background: var(--charcoal);
   color: var(--cream);
   transform: translateY(-2px);
}

.btn-clay {
   background: var(--clay);
   color: var(--white);
}

.btn-clay:hover {
   background: var(--clay-deep);
   transform: translateY(-2px);
}

/* Modifier: full-width centered (used in contact form) */
.btn--full-lg {
   width: 100%;
   justify-content: center;
   padding: 16px 30px;
}

/* ─── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
   opacity: 1;
   transform: none;
}

.reveal-delay-1 {
   transition-delay: 0.1s;
}

.reveal-delay-2 {
   transition-delay: 0.2s;
}

.reveal-delay-3 {
   transition-delay: 0.3s;
}

.reveal-delay-4 {
   transition-delay: 0.4s;
}

.reveal-delay-5 {
   transition-delay: 0.5s;
}

/* ─── PLACEHOLDER IMAGE ─────────────────────────────────────── */
.img-placeholder {
   width: 100%;
   height: 100%;
   background: var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.img-placeholder::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
         var(--ph-shimmer-1) 25%,
         var(--ph-shimmer-2) 50%,
         var(--ph-shimmer-1) 75%);
   background-size: 400% 400%;
   animation: shimmer 4s ease infinite;
}

.img-placeholder .ph-label {
   position: relative;
   z-index: 1;
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ph-label-color);
}

/* ─── JS UTILITY ────────────────────────────────────────────── */

/* Toggled by JS (referral select reveal) */
.js-hidden {
   display: none;
}