/* ─────────────────────────────
   HOME-HERO.CSS — Lo Castro homepage hero carousel
   wp-content/themes/twentytwentyfive-child/styles/home-hero.css
   ───────────────────────────── */

:root {
  --lc-hero-cream: #f7f1e6;
  --lc-hero-gold: #d9b876;
}

/* WordPress's block-theme "constrained" layout (applied by the Post
   Content block itself, regardless of page template) caps width and
   adds side padding around whatever's inside it. Since this file only
   ever loads on the homepage (is_front_page() in functions.php), it's
   safe to fully neutralize it here — same fix every other custom page
   in this project needed. */
.entry-content.is-layout-constrained {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress's global block-spacing style also injects max-width and
   margin-block-start on every direct child of .is-layout-constrained
   (all via low-specificity :where() selectors, easily overridden
   here) — neutralize both, or the first section gets squeezed width
   and an unwanted gap under the header. */
.entry-content.is-layout-constrained > * {
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.lc-home-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 92px);
  height: calc(100svh - 92px);
}

@media (max-width: 900px) {
  .lc-home-hero {
    height: calc(100vh - 75px);
    height: calc(100svh - 75px);
  }
}

.lc-home-hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}

.lc-home-hero-slide.is-active {
  opacity: 1;
}

.lc-home-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lc-home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 480px at 78% 50%, rgba(74, 47, 27, 0.14) 0%, transparent 60%),
    linear-gradient(270deg, rgba(74, 47, 27, 0.48) 0%, rgba(74, 47, 27, 0.14) 55%, transparent 100%);
}

@media (max-width: 900px) {
  .lc-home-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(74, 47, 27, 0.04) 0%,
      rgba(74, 47, 27, 0.1) 35%,
      rgba(74, 47, 27, 0.58) 100%
    );
  }
}

.lc-home-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 120px 0 24px;
  font-family: var(--lc-font-serif);
  text-align: right;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .lc-home-hero-content {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 20px 28px;
    text-align: left;
  }
}

.lc-home-hero-textblock {
  max-width: 520px;
}

@media (max-width: 900px) {
  .lc-home-hero-textblock {
    max-width: 260px;
  }
}

.lc-home-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.6);
  margin-bottom: 10px;
}

.lc-home-hero-title {
  margin: 0;
  font-size: 56px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lc-hero-gold);
}

@media (max-width: 900px) {
  .lc-home-hero-title {
    font-size: 34px;
    line-height: 1.05;
    max-width: 10ch;
  }
}

.lc-home-hero-sub {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.78);
}

@media (max-width: 900px) {
  .lc-home-hero-sub {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

.lc-home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 4px;
  color: rgba(247, 241, 230, 0.92);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  border-bottom: 1px solid rgba(247, 241, 230, 0.5);
  transition: border-color 200ms ease, gap 200ms ease;
}

.lc-home-hero-cta:hover {
  border-color: rgba(247, 241, 230, 0.92);
  gap: 12px;
}

.lc-home-hero-cta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .lc-home-hero-cta {
    margin-top: 18px;
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

.lc-home-hero-bottombar {
  position: absolute;
  z-index: 3;
  bottom: clamp(16px, 4vh, 32px);
  left: 0;
  right: 0;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .lc-home-hero-bottombar {
    bottom: 20px;
    padding: 0 20px;
  }
}

.lc-home-hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc-home-hero-dot {
  appearance: none;
  cursor: pointer;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(247, 241, 230, 0.35);
  transition: width 300ms ease, background 300ms ease;
}

.lc-home-hero-dot.is-active {
  width: 22px;
  background: rgba(247, 241, 230, 0.92);
}

.lc-home-hero-arrows {
  display: inline-flex;
  gap: 10px;
}

@media (max-width: 900px) {
  .lc-home-hero-arrows {
    gap: 8px;
  }
}

.lc-home-hero-arrow {
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(247, 241, 230, 0.34);
  background: rgba(74, 47, 27, 0.18);
  backdrop-filter: blur(10px);
  color: rgba(247, 241, 230, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.lc-home-hero-arrow:hover {
  transform: translateY(-1px);
  background: rgba(74, 47, 27, 0.28);
  border-color: rgba(247, 241, 230, 0.5);
}

@media (max-width: 900px) {
  .lc-home-hero-arrow {
    width: 38px;
    height: 38px;
  }
}

.lc-home-hero-arrowicon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.lc-home-hero-arrowicon-left {
  transform: rotate(135deg);
}

.lc-home-hero-arrowicon-right {
  transform: rotate(-45deg);
}