/* ==========================================================================
   brand.css
   MR. MA RENOVATION - Header brand lockup + split hero (Stage 6B)
   Load AFTER components.css and lightbox.css, BEFORE pages/home.css.
   Uses only NEW class names so older styles are not disturbed:
     .brand-lockup*   (header)      .hero-brand*   (hero)
     .hero-slider*    (hero photos)
   Does NOT touch the sticky-header rule in components.css.
   ========================================================================== */

/* ==========================================================================
   1. HEADER BRAND LOCKUP  (logo + name + tagline)
   ========================================================================== */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-lockup__logo {
  display: block;
  width: auto;
  height: 2.75rem;
  flex: 0 0 auto;
}

.brand-lockup__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.brand-lockup__name {
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F1B2D;
  white-space: nowrap;
}

.brand-lockup__tagline {
  margin-top: 0.2rem;
  font-family: var(--font-body, "Inter", Arial, sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #4a525d;
}

/* Small phones: tagline is short, name stays on one line */
@media (max-width: 380px) {
  .brand-lockup {
    gap: 0.5rem;
  }

  .brand-lockup__logo {
    height: 2.25rem;
  }

  .brand-lockup__name {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
  }

  .brand-lockup__tagline {
    font-size: 0.625rem;
  }
}

@media (min-width: 1024px) {
  .brand-lockup__logo {
    height: 3.25rem;
  }

  .brand-lockup__name {
    font-size: 1.25rem;
  }

  .brand-lockup__tagline {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   2. SPLIT HERO
   Mobile: photo first, text below.  Desktop: text left, photo right.
   ========================================================================== */
.hero-brand {
  background-color: #0F1B2D;
  color: #FAF8F5;
}

.hero-brand__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ----- Text side ----- */
.hero-brand__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.25rem 3rem;
  order: 2;
}

.hero-brand__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-body, "Inter", Arial, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D9A869;
}

.hero-brand__title {
  margin: 0;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: clamp(2.5rem, 9vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #FAF8F5;
}

.hero-brand__title span {
  display: block;
}

/* One thin copper line: the only decoration */
.hero-brand__rule {
  width: 4rem;
  height: 3px;
  margin: 1.5rem 0;
  border: 0;
  background-color: #9C5E2B;
}

.hero-brand__text {
  max-width: 32rem;
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.88);
}

.hero-brand__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-brand__actions .btn {
  width: 100%;
  justify-content: center;
}

.hero-brand__meta {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: rgba(250, 248, 245, 0.7);
}

/* ----- Photo side ----- */
.hero-brand__media {
  position: relative;
  order: 1;
  min-height: 16rem;
  aspect-ratio: 4 / 3;
  background-color: #262B33;
  overflow: hidden;
}

/* Branded panel shown when there are no photos yet (no broken images) */
.hero-brand__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background-color: #262B33;
}

.hero-brand__fallback img {
  display: block;
  width: auto;
  height: 4.5rem;
  max-width: 60%;
  object-fit: contain;
}

.hero-brand__fallback p {
  margin: 0;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: rgba(250, 248, 245, 0.9);
}

/* ----- Tablet ----- */
@media (min-width: 768px) {
  .hero-brand__content {
    padding: 3.5rem 2rem 4rem;
  }

  .hero-brand__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-brand__actions .btn {
    width: auto;
  }

  .hero-brand__media {
    aspect-ratio: 16 / 10;
  }
}

/* ----- Desktop: true split ----- */
@media (min-width: 1024px) {
  .hero-brand__inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    min-height: 34rem;
  }

  .hero-brand__content {
    order: 1;
    padding: 4rem max(2rem, calc((100vw - 72rem) / 2)) 4rem max(2rem, calc((100vw - 72rem) / 2));
    padding-right: 3rem;
  }

  .hero-brand__media {
    order: 2;
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* ==========================================================================
   3. HERO PHOTO SLIDER (crossfade)
   ========================================================================== */
.hero-slider {
  position: absolute;
  inset: 0;
}

.hero-slider__stage {
  position: absolute;
  inset: 0;
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}

.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1000ms ease, visibility 0s;
}

.hero-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Honest label on illustrative pictures */
.hero-slider__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.25rem;
  background-color: rgba(15, 27, 45, 0.85);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #FAF8F5;
}

/* ----- Controls ----- */
.hero-slider__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(15, 27, 45, 0.72);
}

.hero-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target, 2.75rem);
  height: var(--touch-target, 2.75rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #FAF8F5;
  cursor: pointer;
}

.hero-slider__btn:hover {
  background-color: rgba(250, 248, 245, 0.16);
}

.hero-slider__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.hero-slider__dots {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-slider__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target, 2.75rem);
  height: var(--touch-target, 2.75rem);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-slider__dot::before {
  content: "";
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #FAF8F5;
  border-radius: 50%;
  background-color: transparent;
}

.hero-slider__dot[aria-current="true"]::before {
  background-color: #FAF8F5;
}

/* Keyboard focus rings */
.hero-slider__btn:focus-visible,
.hero-slider__dot:focus-visible {
  outline: 3px solid #D9A869;
  outline-offset: 2px;
}

/* ==========================================================================
   4. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide,
  .hero-slider__slide.is-active {
    transition: none;
  }
}

/* =====================================================
   FINAL HERO STYLE — FULL BACKGROUND IMAGE + NAVY GRADIENT
   ===================================================== */

.hero-brand {
  background: #0F1B2D;
}

.hero-brand__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 72vh, 760px);
  overflow: hidden;
}

.hero-brand__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  order: 0;
}

/* Dark gradient: strong on left, transparent on right */
.hero-brand__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(15, 27, 45, 0.98) 0%,
    rgba(15, 27, 45, 0.88) 32%,
    rgba(15, 27, 45, 0.55) 55%,
    rgba(15, 27, 45, 0.12) 100%
  );
  pointer-events: none;
}

.hero-brand__content {
  position: relative;
  z-index: 3;
  order: 1;
  width: 100%;
  max-width: 760px;
  padding: clamp(3rem, 7vw, 6rem);
  background: transparent;
}

/* Keep text readable above the image */
.hero-brand__title,
.hero-brand__text,
.hero-brand__meta {
  color: #FAF8F5;
}

/* Mobile layout */
@media (max-width: 767px) {
  .hero-brand__inner {
    min-height: 620px;
  }

  .hero-brand__media::after {
    background: linear-gradient(
      90deg,
      rgba(15, 27, 45, 0.95) 0%,
      rgba(15, 27, 45, 0.82) 45%,
      rgba(15, 27, 45, 0.35) 100%
    );
  }

  .hero-brand__content {
    padding: 3rem 1.5rem;
  }
}

/* Services header alignment fix */
.site-header .brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.site-header .brand-lockup__logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.site-header .brand-lockup__text {
  display: flex;
  flex-direction: column;
}