/* Homepage: Baila Tampa reds, warm white, and real studio photography. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); }
.home-page { --paper:var(--color-surface-light); --ink:var(--color-text-dark); --stage:var(--color-stage); --accent:var(--color-primary); --accent-ink:var(--color-primary-dark); --backdrop-deep:var(--color-brand-deep); --muted:var(--color-ink-muted); --line:var(--color-line); --section-space:clamp(128px,11vw,200px); --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; background:var(--paper); color:var(--ink); }
.home-page main { overflow:clip; }
.home-page section[id] { scroll-margin-top:24px; }
.home-page h1, .home-page h2 { font-family:var(--display); font-weight:800; }
.home-page h2 { font-size:clamp(2.8rem,4.4vw,4.5rem); line-height:.98; letter-spacing:-.015em; }
.home-page h2 > span { color:var(--accent-ink); }
.home-page p { line-height:1.65; }
.home-container { width:calc(100% - 112px); max-width:1328px; margin-inline:auto; }
.home-section, .home-finale { padding-block:var(--section-space); }
.home-page .action { display:inline-flex; justify-content:center; align-items:center; gap:28px; min-height:54px; padding:15px 23px; font-size:var(--font-size-small); font-weight:700; line-height:1.4; border:1px solid transparent; border-radius:8px; transition:background .2s,transform .2s; }
.action > span { font-size:1.35rem; line-height:1; transition:transform .2s; }
.action:hover > span, .text-link:hover > span { transform:translate(2px,-2px); }
.home-page .action-accent { background: var(--color-action-warm); color: var(--color-action-text); }
.home-page .action-accent:hover { background: var(--color-action-warm-hover); transform:translateY(-2px);  color: var(--color-action-text); }
.home-page .action-outline { border-color:#bea79a; color:var(--ink); }
.home-page .action-outline:hover { background:var(--color-surface-tint); }
.home-page .action-dark { background:var(--ink); color:var(--paper); }
.home-page .action-dark:hover { background:#5d2b20; transform:translateY(-2px); }
.home-page .action-light { background: var(--color-action-warm); color: var(--color-action-text); }
.home-page .action-light:hover { background: var(--color-action-warm-hover); transform:translateY(-2px);  color: var(--color-action-text); }
.home-page .action-warm { background:var(--color-action-warm); color: var(--color-action-text); }
.home-page .action-warm:hover { background:var(--color-action-warm-hover); transform:translateY(-2px); }
.home-page .text-link { display:inline-flex; align-items:center; gap:30px; padding-block:8px; color:var(--ink); border-bottom:1px solid var(--ink); font-size:var(--font-size-small); font-weight:700; }
.text-link > span { display:inline-block; font-size:1.35rem; transition:transform .2s; }

/* A page-width class panel floats over the red continued from the hero. */
.classes-backdrop { display:flow-root; background:linear-gradient(180deg,var(--hero-base) 0%,var(--color-brand-mid) 50%,var(--backdrop-deep) 100%); padding-bottom:clamp(72px,7vw,112px); }
.home-classes { position:relative; z-index:1; width:calc(100% - 112px); max-width:1328px; margin:-40px auto 0; border-radius:clamp(24px,3vw,40px); background:var(--paper); padding-top:clamp(48px,4vw,72px); padding-inline:clamp(32px,4vw,64px); }
.home-classes > .home-container { width:100%; max-width:none; }

/* Tall class photographs with color fading from the poster lettering. */
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:40px; }
.home-classes .section-heading { align-items:center; margin-bottom:28px; }
.home-classes .section-heading h2 { font-family:var(--font-primary); font-size:1rem; font-weight:700; line-height:1.4; letter-spacing:0; }
.dance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.home-page .dance-card { color:var(--ink); display:block; }
.dance-card-art { height:clamp(360px,34vw,460px); border-radius:14px; position:relative; overflow:hidden; isolation:isolate; container-type:inline-size; background:rgb(var(--card-color)); }
.salsa-card { --card-color:124,2,2; --photo-position:62%; }
.bachata-card { --card-color:106,16,8; --photo-position:70%; }
.mambo-card { --card-color:96,7,14; --photo-position:49%; }
.dance-card-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--photo-position) center; filter:brightness(1.75) saturate(.85); transition:transform .6s ease; }
.mambo-card .dance-card-photo { top:20%; height:80%; }
.dance-card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--card-color),1) 0%,rgba(var(--card-color),.96) 23%,rgba(var(--card-color),.6) 42%,rgba(var(--card-color),.12) 68%,rgba(38,0,0,.38) 100%); pointer-events:none; }
.dance-word { font-family:var(--display); font-size:clamp(2.8rem,20cqi,5.4rem); line-height:1; margin:0; position:absolute; top:28px; left:24px; right:20px; z-index:1; color:#fff; }
.mambo-card .dance-word { font-size:clamp(2rem,18.5cqi,5rem); }
.card-arrow { width:45px; height:45px; border-radius:50%; background:var(--color-action-warm); color: var(--color-action-text); display:grid; place-items:center; position:absolute; bottom:24px; right:24px; z-index:1; font-size:1.4rem; transition:transform .25s; }
@media (hover:hover) {
  .dance-card:hover .dance-card-photo { transform:scale(1.04); }
  .dance-card:hover .card-arrow { transform:translate(2px,-2px); }
}
@media (prefers-reduced-motion:reduce) {
  .dance-card-photo, .card-arrow { transition:none; }
  .dance-card:hover .dance-card-photo, .dance-card:hover .card-arrow { transform:none; }
}
.dance-card-copy { padding-top:15px; }
.course-detail { display:block; font-size:var(--font-size-small); color:var(--muted); }
.beginner-callout { margin-top:42px; background:var(--color-surface-tint); border:1px solid var(--color-line); border-radius:12px; padding:25px 28px; display:flex; align-items:center; gap:22px; }
.beginner-callout h3 { font-size:var(--font-size-body); margin:0; }.beginner-callout .action { margin-left:auto; flex-shrink:0; }
.class-support { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; font-size:var(--font-size-small); padding-top:23px; color:var(--muted); }.class-support a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }

/* A welcoming first-visit guide beside a real class photograph. */
.first-visit { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:clamp(32px,4vw,64px); margin-top:clamp(48px,5vw,72px); }
.first-visit-photo { overflow:hidden; border-radius:14px; background:var(--backdrop-deep); }
.first-visit-photo img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; object-position:center; filter:brightness(1.8) saturate(.95); }
.first-visit-copy h3 { font-family:var(--display); font-size:clamp(2.6rem,3.6vw,3.7rem); font-weight:800; line-height:1.05; letter-spacing:-.015em; margin:0 0 20px; }
.first-visit-copy p { max-width:36ch; margin:0 0 22px; color:var(--muted); font-size:var(--font-size-body); }

/* A rounded Events panel bridges the red backdrop and the light studio section. */
.events-backdrop { padding-inline:clamp(16px,2vw,40px); background:linear-gradient(180deg,var(--backdrop-deep) 0%,var(--backdrop-deep) 30%,#e4b9a2 78%,var(--paper) 100%); }
.home-events { background:var(--stage); color:var(--paper); position:relative; isolation:isolate; overflow:hidden; border-radius:clamp(28px,4vw,56px); box-shadow:0 24px 64px #2600001a; }
.events-background { position:absolute; inset:0; z-index:-2; overflow:hidden; background:url('../images/home/events-video-poster.webp') center / cover; pointer-events:none; }
.events-background-video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .5s ease; }
.events-background-video.is-playing { opacity:1; }
/* These temporary tiles reveal the footage without moving the section content. */
.events-reveal { position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--reveal-columns),minmax(0,1fr)); grid-template-rows:repeat(var(--reveal-rows),minmax(0,1fr)); pointer-events:none; }
.events-reveal-tile { display:block; margin:-.5px; background:var(--stage); }
.home-events::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(38,0,0,.96) 0%,rgba(97,5,2,.86) 50%,rgba(55,4,1,.68) 100%); pointer-events:none; }
.home-events :focus-visible { outline-color:var(--color-primary-light); }
@media (prefers-reduced-motion:reduce) { .events-background-video { transition:none; }.events-reveal { display:none; } }
.events-layout { position:relative; z-index:2; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.events-copy .action { margin-top:24px; }.events-copy h2 { font-size:clamp(3rem,4.8vw,4.8rem); }.events-copy h2 > span { color:var(--color-primary-light); }
.event-links { display:flex; flex-direction:column; border-top:1px solid #ffd18d40; }
.event-links > a { display:flex; align-items:center; gap:20px; padding:25px 0; border-bottom:1px solid #ffd18d40; color:#fff; }
.event-links h3 { font-size:var(--font-size-question); line-height:1.4; margin:0; }
.event-link-arrow { font-size:1.35rem; margin-left:auto; transition:transform .2s; }.event-links a:hover { color:var(--color-primary-light); }.event-links a:hover .event-link-arrow { transform:translate(2px,-2px); }

/* Community and practical information */
.home-community { position:relative; z-index:1; padding-top:0; }
.community-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:75px; align-items:start; min-height:clamp(320px,26vw,420px); }
.community-photo { position:relative; margin-top:calc(-1 * clamp(72px,6vw,104px)); padding:8px; border-radius:28px; background:var(--paper); box-shadow:0 18px 48px #4b010124; }
.community-photo img { display:block; width:100%; height:auto; aspect-ratio:1400/733; object-fit:cover; border-radius:20px; }
.community-copy { padding-top:clamp(96px,8vw,144px); }
.community-copy h2 { font-size:clamp(2.8rem,3.7vw,3.9rem); margin-bottom:24px; }.community-copy > p:not(.kicker) { font-size:var(--font-size-body); color:var(--muted); }.community-copy .text-link { margin-top:4px; }

/* A live map and a direct route to the studio, aligned with the community row. */
.studio-location { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:75px; align-items:center; margin-top:clamp(40px,4vw,64px); }
.studio-map { position:relative; width:100%; min-width:0; min-height:340px; aspect-ratio:5/3; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#f2e7dd; }
.studio-map iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.location-copy h3 { font-family:var(--display); font-size:clamp(2.8rem,3.7vw,3.9rem); font-weight:800; line-height:1.05; letter-spacing:-.015em; margin:0 0 24px; }
.location-copy address { font-style:normal; font-size:var(--font-size-body); font-weight:500; line-height:1.65; }
.location-copy p { max-width:36ch; margin:16px 0 26px; font-size:var(--font-size-body); color:var(--muted); }
/* The FAQ panel and closing invitation share a red backdrop that continues into the footer. */
.home-ending { padding-top:clamp(64px,6vw,96px); background:linear-gradient(180deg,var(--hero-base) 0%,var(--color-brand-mid) 52%,var(--backdrop-deep) 100%); }
.home-faq { width:calc(100% - 112px); max-width:1328px; margin-inline:auto; padding:clamp(64px,6vw,96px) clamp(32px,4vw,64px); border-radius:clamp(24px,3vw,40px); background:var(--paper); }
.home-faq > .home-container { width:100%; max-width:none; }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:80px; }
.faq-layout h2 { font-size:clamp(2.8rem,3.7vw,3.9rem); margin-bottom:26px; text-wrap:balance; }
.home-questions details { border-bottom:1px solid var(--line); }.home-questions details:first-child { border-top:1px solid var(--line); }
.home-questions summary { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-block:24px; cursor:pointer; font-size:var(--font-size-question); font-weight:600; line-height:1.5; list-style:none; }.home-questions summary::-webkit-details-marker { display:none; }
.home-questions summary > span { flex-shrink:0; }
.home-questions summary > span::before { content:'+'; font-size:1.4rem; font-weight:400; }.home-questions [open] summary > span::before { content:'−'; }
.home-questions p { color:var(--muted); font-size:var(--font-size-body); padding:0 30px 24px 0; margin:0; }.home-questions p a { color:var(--accent-ink); text-decoration:underline; }
.home-finale { color:#fff; text-align:center; }
.home-finale .home-container { display:flex; flex-direction:column; align-items:center; gap:20px; }
.home-finale h2 { font-size:clamp(3.2rem,5.5vw,5.2rem); line-height:1; }
.home-finale p { max-width:48ch; margin:0; font-size:var(--font-size-body); color:var(--color-copy-light); text-wrap:balance; }
.home-finale .action { min-width:160px; margin-top:8px; }
.home-page .site-footer { background:linear-gradient(180deg,var(--backdrop-deep) 0%,var(--color-brand-footer) 100%); border-top:0; }

@media (max-width:1100px) {
  .home-container { width:calc(100% - 72px); }
  .home-classes, .home-faq { width:calc(100% - 72px); }
  .dance-grid { gap:18px; }.dance-word { left:20px; right:16px; }.beginner-callout { gap:15px; padding:24px 20px; }.beginner-callout .action { padding-inline:15px; gap:12px; }
  .events-layout { gap:55px; }.community-layout, .studio-location { gap:45px; }.faq-layout { gap:45px; }
}
@media (max-width:760px) {
  .home-page { --section-space:88px; }
  .home-container { width:calc(100% - 40px); }
  .classes-backdrop { padding-bottom:64px; }
  .home-classes { width:calc(100% - 32px); margin-top:-24px; padding-top:40px; padding-inline:clamp(16px,4vw,28px); }
  .home-ending { padding-top:48px; }
  .home-faq { width:calc(100% - 32px); padding:48px clamp(16px,4vw,28px); }
  .section-heading { gap:20px; margin-bottom:28px; }.section-heading h2 { font-size:3.2rem; }
  .dance-grid { grid-template-columns:1fr; gap:32px; }.dance-card-art { height:clamp(360px,110vw,440px); }.dance-word { top:24px; left:24px; right:20px; }.dance-card-copy { padding-top:12px; }
  .beginner-callout { flex-wrap:wrap; margin-top:32px; padding:24px; gap:10px; }.beginner-callout .action { margin:9px 0 0; width:100%; }
  .first-visit { grid-template-columns:1fr; gap:28px; margin-top:48px; }
  .first-visit-copy h3 { margin-bottom:16px; }
  .class-support { gap:13px 25px; }.events-layout { grid-template-columns:1fr; gap:30px; }.events-copy { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }.events-copy h2 { font-size:3.2rem; }.events-copy .action { margin:0; }
  .event-links > a { gap:16px; padding-block:24px; }.event-link-arrow { font-size:1.6rem; }
  .community-layout { grid-template-columns:1fr; gap:36px; min-height:0; }.community-photo { margin-top:-44px; border-radius:24px; }.community-photo img { border-radius:16px; }.community-copy { padding-top:0; }
  .studio-location { grid-template-columns:1fr; gap:28px; margin-top:64px; }
  .studio-map { min-height:320px; border-radius:20px; }
  .location-copy h3 { font-size:3.1rem; margin-bottom:20px; }
  .community-copy h2 { font-size:3.1rem; }.faq-layout { grid-template-columns:1fr; gap:28px; }.faq-layout h2 { font-size:3.1rem; margin-bottom:18px; }
  .home-finale h2 { font-size:3.1rem; }.home-finale .home-container { gap:16px; }.home-finale .action { padding-inline:15px; gap:12px; }
}
@media (max-width:370px) {.section-heading h2 { font-size:2.7rem; }
}