/* ============================================================
   The Ritz-Carlton Residences Sarasota Bay — e-brochure clone
   Shared architecture (see foleon-ebrochure-clone skill):
   - viewport-based hero height
   - reusable .section-* classes
   - responsive breakpoints: desktop / tablet (861-1180) / mobile (<=860)
   ============================================================ */

:root{
  --dark: #1a1a1a;
  --text-dark: #333333;
  --btn-bg: #404040;
  --topbar-bg: rgba(20,20,20,0.55);
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  font-family:"Times New Roman", Times, serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#fff;
  color:#333;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; }

/* ---------- top navigation bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:48px;
  display:flex; align-items:center;
  background: var(--topbar-bg);
  color:#e8e8e8;
  font-family: Arial, Helvetica, sans-serif;
  font-size:14px;
  padding:0 16px;
  gap:16px;
}
.topbar .menu-icon{ cursor:pointer; font-size:20px; line-height:1; }
.topbar .page-count{ opacity:.85; }
.topbar .page-title{ flex:1; }
.topbar .mute-icon{ opacity:.85; }

/* ---------- prev/next nav arrows ---------- */
.page-nav{
  position:fixed; right:24px; bottom:24px; z-index:50;
  display:flex; gap:8px;
}
.page-nav a{
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,0.35);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-family:Arial, sans-serif;
}
.page-nav a.disabled{ opacity:.35; pointer-events:none; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100vh; min-height:520px;
  overflow:hidden;
  background:#111;
}
.hero .video-bg{
  position:absolute; top:50%; left:50%;
  width:100vw; height:100vh;
  min-width:177.77vh; /* 16:9 cover */
  min-height:56.25vw;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}
.hero .scroll-down{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
}

/* ---------- intro / photo + olive text panel section ---------- */
.section-photo-text{
  position:relative;
  min-height:100vh;
  color:#fff;
  overflow:hidden;
}
.section-photo-text .intro-img-full{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-size:cover; background-position:center;
  z-index:1;
}
.section-photo-text .intro-text{
  position:relative; z-index:2;
  margin-left:auto;
  width:45%;
  min-height:100vh;
  background:rgba(84,83,74,0.9);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:90px 72px;
}
.section-photo-text h1{
  font-size:56px; font-weight:700; font-style:italic; line-height:1.1;
  margin:0 0 28px;
}
.section-photo-text p{
  font-size:18px; font-weight:400; line-height:2;
  margin:0;
}

/* ---------- day tiles (3-col cards) ---------- */
.day-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  background:rgba(181,173,165,0.2);
  padding:48px;
}
.day-tile{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #ddd;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.day-tile .tile-img{
  width:100%;
  height:45vh; min-height:320px;
  object-fit:cover;
}
.day-tile .tile-body{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  padding:32px 16px;
  text-align:center;
}
.day-tile .tile-label{
  font-size:32px; font-weight:700; color:var(--text-dark);
}
.day-tile .tile-btn{
  display:inline-block;
  background:var(--btn-bg); color:#fff;
  font-size:16px; font-weight:400;
  padding:12px 20px; border-radius:2px;
  font-family:"Times New Roman", serif;
}

/* ---------- CTA section ---------- */
.section-cta{
  padding:110px 24px;
  text-align:center;
  background:#fff;
}
.section-cta .inner{ max-width:820px; margin:0 auto; }
.section-cta h2{
  font-size:56px; font-weight:600; font-style:italic; color:var(--text-dark);
  line-height:1.3; margin:0 0 24px;
}
.section-cta p{
  font-size:18px; color:var(--text-dark); line-height:2; margin:0 0 16px;
}
.section-cta a{ color:var(--text-dark); text-decoration:underline; }

/* ---------- footer ---------- */
.site-footer{
  color:#fff;
  min-height:359px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  padding:60px 24px;
  text-align:center;
}
.site-footer .footer-inner{ max-width:1024px; margin:0 auto; }
.site-footer .footer-logo{ height:64px; margin:0 auto 32px; }
.site-footer p, .site-footer span{
  font-size:22px; line-height:1.5; max-width:820px; margin:0 auto 16px;
}
.site-footer a{ color:#fff; text-decoration:underline; }

/* ---------- itinerary day-rows (Day One/Two/Three) ---------- */
.day-row{
  position:relative;
  display:grid;
  grid-template-columns: 7fr 5fr;
  min-height:100vh;
  padding:50px 0;
}
.day-row.img-right{ grid-template-columns: 5fr 7fr; }
.day-row.img-right .img-col{ order:2; }
.day-row.img-right .text-col{ order:1; }
.day-row .img-col{
  background-size:cover; background-position:center;
  min-height:400px;
}
.day-row .text-col{
  display:flex; flex-direction:column; justify-content:center;
  padding:64px;
}
.day-row.text-only{ grid-template-columns:1fr; background:#f0f0f0; min-height:auto; padding:0; }
.day-row.text-only .text-col{ max-width:900px; margin:0 auto; text-align:left; align-items:flex-start; padding:90px 24px; }

.time-label{ font-size:22px; line-height:1.6; color:#54534a; margin:0 0 8px; display:block; }
.row-heading{ font-size:40px; font-weight:700; font-style:italic; color:#54534a; margin:0 0 20px; line-height:1.6; }
.row-body{ font-size:18px; color:#333; line-height:2; margin:0; }
.row-body a{ color:#333; text-decoration:underline; }

/* ---------- full-bleed background-video rows ---------- */
.video-bg-row{
  position:relative; width:100%; min-height:100vh;
  overflow:hidden; background:#000;
}
.video-bg-row iframe{
  position:absolute; top:0; left:0;
  width:100%; height:56.25vw; /* 16:9 relative to full width, cropped like the live site */
  min-height:100%;
  border:0; pointer-events:none;
}
.video-bg-with-text{
  display:flex; align-items:center;
}
.video-bg-with-text .video-text-overlay{
  position:relative; z-index:2;
  max-width:640px;
  padding:0 24px 0 60px;
  color:#fff;
}
.video-bg-with-text.text-right .video-text-overlay{
  margin-left:auto;
  padding:0 60px 0 24px;
}
.video-bg-row .scroll-down{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; z-index:3;
}
.video-bg-with-text .video-text-overlay .time-label,
.video-bg-with-text .video-text-overlay .row-heading,
.video-bg-with-text .video-text-overlay .row-body{ color:#fff; }
.video-bg-with-text .video-text-overlay .row-body a{ color:#fff; }

/* ---------- scroll-down arrow reused on day-page first row ---------- */
.day-row .scroll-down{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; z-index:3;
}

/* ---------- day-page title banner ---------- */
.day-hero{
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background-size:cover; background-position:center;
  padding:80px 24px;
}
.day-hero h1{ font-size:64px; font-weight:700; margin:0; text-shadow:0 2px 10px rgba(0,0,0,0.45); }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width:861px) and (max-width:1180px){
  .section-photo-text h1, .section-cta h2{ font-size:44px; }
  .day-tile .tile-label{ font-size:26px; }
  .row-heading{ font-size:32px; }
}

@media (max-width:860px){
  .section-photo-text{ min-height:auto; display:block; }
  .section-photo-text .intro-img-full{ position:relative; height:280px; width:100%; }
  .section-photo-text .intro-text{ width:100%; margin-left:0; min-height:auto; padding:40px 24px; text-align:left; align-items:flex-start; }
  .day-tiles{ grid-template-columns:1fr; }
  .day-tile .tile-img{ height:280px; min-height:0; }
  .section-photo-text h1, .section-cta h2{ font-size:32px; }
  .section-photo-text p, .section-cta p{ font-size:16px; }
  .section-photo-text{ padding:60px 20px; min-height:auto; }
  .section-cta{ padding:60px 20px; }
  .site-footer p, .site-footer span{ font-size:16px; }
  .hero{ height:100svh; }
  .day-row, .day-row.img-right{ grid-template-columns:1fr; min-height:auto; padding:32px 0; }
  .day-row .img-col{ height:320px; min-height:0; order:1 !important; }
  .day-row .text-col{ order:2 !important; padding:32px 20px; }
  .row-heading{ font-size:28px; }
  .row-body{ font-size:16px; }
  .video-bg-row{ min-height:56.25vw; }
  .video-bg-with-text .video-text-overlay{ padding:40px 20px; max-width:100%; }
  .video-bg-with-text .row-heading{ font-size:26px; }
  .day-hero{ min-height:40vh; padding:50px 20px; }
  .day-hero h1{ font-size:36px; }
  .day-tiles{ grid-template-columns:1fr; padding:20px; gap:20px; }
  .day-tile .tile-img{ height:280px; min-height:0; }
}