/* Romantic Dining in Muskoka - page-specific styles
   Global typography, fonts and colours are inherited from global.css. */

.romantic-dining { width: 100%; overflow: hidden; }
.rd-section { padding: clamp(3.5rem, 6vw, 7rem) 2rem; }
.rd-narrow { width: min(100%, 900px); margin: 0 auto; text-align: center; }
.rd-content { width: min(100%, 1180px); margin: 0 auto; }

.rd-eyebrow {
  color: var(--gold2); font-family: var(--font-roboto);
  font-size: 1.45rem; font-weight: 600; letter-spacing: .18em;
  line-height: 1.4; margin: 0 0 1.2rem; text-align: center;
  text-transform: uppercase;
}

.rd-intro {
  padding-top: clamp(3rem, 5vw, 5.5rem);
  padding-bottom: clamp(3rem, 5vw, 5.5rem);
  background: linear-gradient(180deg, rgba(26,26,26,.92), rgba(0,0,0,.98));
}
.rd-intro h1 { max-width: 1000px; margin: 0 auto 1.8rem; }

.rd-intro h2, .rd-copy h2, .rd-feature-panel h2,
.rd-evening h2, .rd-final-inner h2 {
  font-size: clamp(2.3rem, 3vw + .5rem, 3.5rem);
  line-height: 1.25; letter-spacing: .06em; margin: 1.2rem 0 1.8rem;
}

.rd-intro p, .rd-narrow > p:not(.rd-eyebrow), .rd-copy p {
  font-size: clamp(1.65rem, 1.2vw + 1rem, 2rem); line-height: 1.75;
}
.rd-lead {
  color: var(--whitecoffee);
  font-size: clamp(1.9rem, 1.5vw + 1rem, 2.3rem) !important;
  line-height: 1.65 !important;
}

.rd-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center; gap: clamp(2.5rem, 5vw, 6rem);
}
.rd-reverse .rd-image-wrap { order: 2; }
.rd-image-wrap {
  overflow: hidden; border: 1px solid var(--gold31); border-radius: 12px;
  background: var(--bg-dark); box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
.rd-image-wrap img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.rd-copy { text-align: center; }
.rd-copy h2 { margin-top: .5rem; }
.rd-text-link {
  display: inline-block; margin-top: .8rem; color: var(--pureyellow);
  font-size: 1.7rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: .35rem;
}
.rd-text-link:hover { color: var(--white); }

.rd-breakfast { background: var(--bg-grey); }
.rd-fireplace {
  background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.88)), var(--bg-dark);
}
.rd-music { background: #101010; }
.rd-feature-panel {
  max-width: 850px; padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(219,182,112,.42); border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.rd-feature-panel p:not(.rd-eyebrow), .rd-evening p:not(.rd-eyebrow) {
  font-size: clamp(1.65rem, 1.2vw + 1rem, 2rem); line-height: 1.75;
}
.rd-evening { background: var(--bg-grey); }
.rd-private { background: #080808; }
.rd-culinary { background: var(--bg-dark); }

.rd-button {
  display: inline-block; margin: 1.8rem auto 0; padding: 1.2rem 2.6rem;
  border: 1px solid var(--gold3); border-radius: 5px;
  background: linear-gradient(90deg, #c9a441, #e0bd73); color: #171717;
  font-family: var(--font-roboto); font-size: 1.6rem; font-weight: 700;
  letter-spacing: .04em; text-align: center; text-decoration: none;
  text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rd-button:visited { color: #171717; }
.rd-button:hover {
  color: #000; background: #f0cf82;
  box-shadow: 0 0 18px rgba(212,175,55,.28);
  text-decoration: none; transform: translateY(-2px);
}

.rd-final-cta {
  padding: clamp(4rem, 7vw, 7rem) 2rem;
  background: linear-gradient(135deg, #171717, #080808);
  border-top: 1px solid var(--gold31); text-align: center;
}
.rd-final-inner { width: min(100%, 900px); margin: 0 auto; }
.rd-final-inner p:not(.rd-eyebrow) {
  color: var(--whitecoffee); font-size: clamp(1.7rem, 1.2vw + 1rem, 2rem);
  line-height: 1.7;
}

@media (max-width: 760px) {
  .rd-section { padding: 3.8rem 1.8rem; }
  .rd-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .rd-reverse .rd-image-wrap { order: 0; }
  .rd-image-wrap img { aspect-ratio: 16 / 9; }
  .rd-copy { text-align: center; }
  .rd-intro h1 { max-width: 100%; }
  .rd-intro h2, .rd-copy h2, .rd-feature-panel h2,
  .rd-evening h2, .rd-final-inner h2 {
    font-size: 2.5rem; line-height: 1.3; letter-spacing: .03em;
  }
  .rd-eyebrow { font-size: 1.25rem; letter-spacing: .12em; }
  .rd-feature-panel { padding: 2.2rem 1.7rem; }
  .rd-button { width: 100%; max-width: 360px; padding: 1.2rem 1.4rem; }
}
@media (max-width: 420px) {
  .rd-section { padding: 3.2rem 1.5rem; }
  .rd-intro h2, .rd-copy h2, .rd-feature-panel h2,
  .rd-evening h2, .rd-final-inner h2 { font-size: 2.2rem; }
}