@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500;600&display=swap');

/* ===================================================================
   Global Aman Design System — Pulse Grande
   Minimalist luxury: Cormorant Garamond + Jost
   =================================================================== */

/* ─── CSS Variables ─── */
:root {
  --color-bg-light:  #ffffff;
  --color-bg-alt:    #fcf9f4;
  --color-text-dark: #222222;
  --color-text-mid:  #444444;
  --color-text-muted:#666666;
  --color-text-light:#999999;
  --color-accent:    #AF8F59;
  --color-border:    #ede9e0;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  /* Type scale */
  --text-display:  3.4rem;   /* page h1  */
  --text-title:    2.5rem;   /* section h2 */
  --text-subtitle: 1.75rem;  /* h3 */
  --text-body:     1.15rem;  /* body serif */
  --text-small:    0.82rem;  /* body sans */
  --text-micro:    0.7rem;   /* labels, badges */
}

/* ─── Base Resets ─── */
body {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

/* ─── Link color reset inside aman page content ─── */
.aman-page a,
.dine-page a {
  color: var(--color-text-dark);
  text-decoration: none;
}

.aman-page a:hover,
.dine-page a:hover {
  color: var(--color-accent);
}

/* ─── Neutralize theme pseudo-elements on native header element ─── */
.aman-page header::before,
.aman-page header::after,
.aman-header::before,
.aman-header::after,
.dine-header::before,
.dine-header::after {
  content: none !important;
  display: none !important;
}

/* ===================================================================
   1. Page Header (Title + Intro)
   =================================================================== */

.aman-header,
.dine-header {
  padding: 140px 20px 36px;
  text-align: center;
  background: var(--color-bg-light);
}

.aman-header h1,
.dine-header h1 {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 300;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
  /* Kill any theme pseudo-element decoration */
  position: static;
}

.aman-header h1::before,
.aman-header h1::after,
.dine-header h1::before,
.dine-header h1::after {
  content: none !important;
  display: none !important;
}

.aman-intro-text,
.dine-intro-text {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 780px;
  margin: 0 auto;
}

/* Ensure no link color bleeds into intro text */
.aman-intro-text a,
.dine-intro-text a {
  color: var(--color-accent);
  text-decoration: none;
}

.aman-subtitle,
.dine-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 12px;
  display: block;
}

/* ===================================================================
   2. Hero Image
   =================================================================== */

.aman-hero,
.dine-main-image {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.aman-hero img,
.dine-main-image img {
  display: block;
  width: 100%;
  height: 65vh;
  max-height: 700px;
  min-height: 400px;
  object-fit: cover;
}

.aman-hero.full-bleed {
  max-width: 100%;
  padding: 0;
}

/* ===================================================================
   3. Section Wrappers
   =================================================================== */

.aman-section {
  padding: 100px 40px;
  background: var(--color-bg-light);
}

.aman-section-alt {
  padding: 100px 40px;
  background: var(--color-bg-alt);
}

/* ===================================================================
   4. Side-by-Side Content Blocks
   =================================================================== */

.aman-side-by-side {
  max-width: 1200px;
  margin: 0 auto 120px;
  display: flex;
  align-items: stretch;
  gap: 80px;
}

.aman-side-by-side:last-child {
  margin-bottom: 0;
}

.aman-side-by-side.reverse {
  flex-direction: row-reverse;
}

.aman-sbs-media {
  flex: 0 0 55%;
  max-width: 55%;
  overflow: hidden;
}

.aman-sbs-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.aman-side-by-side:hover .aman-sbs-media img {
  transform: scale(1.04);
}

.aman-sbs-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}

.aman-sbs-text h2 {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  font-weight: 300;
  color: var(--color-text-dark);
  margin: 0 0 20px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.aman-sbs-text h3 {
  font-family: var(--font-serif);
  font-size: var(--text-subtitle);
  font-weight: 400;
  color: var(--color-text-dark);
  margin: 0 0 14px;
  line-height: 1.3;
}

.aman-sbs-text p {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--color-text-mid);
  margin: 0 0 14px;
}

/* ===================================================================
   5. CTA Links
   =================================================================== */

.aman-cta a,
a.aman-cta {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-accent);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.aman-cta a:hover,
a.aman-cta:hover {
  color: var(--color-accent);
}

/* ===================================================================
   6. Dine-specific outlet blocks (carry-over compatibility)
   =================================================================== */

.dine-outlet-block {
  max-width: 1200px;
  margin: 0 auto 120px;
  display: flex;
  align-items: stretch;
  gap: 80px;
}

.dine-outlet-block:nth-child(even) {
  flex-direction: row-reverse;
}

.dine-outlet-block:last-child {
  margin-bottom: 0;
}

.dine-outlet-media {
  flex: 0 0 55%;
  max-width: 55%;
  overflow: hidden;
}

.dine-outlet-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  transition: transform 8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.dine-outlet-block:hover .dine-outlet-media img {
  transform: scale(1.04);
}

.dine-outlet-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}

.dine-outlet-text h2 {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  font-weight: 300;
  color: var(--color-text-dark);
  margin: 0 0 20px;
  line-height: 1.2;
}

.dine-outlet-text p {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--color-text-mid);
  margin: 0 0 14px;
}

.dine-details {
  margin: 20px 0;
}

.dine-detail-item {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.dine-detail-label {
  font-weight: 500;
  min-width: 90px;
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-micro);
}

.dine-cta a {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-accent);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.dine-cta a:hover {
  color: var(--color-accent);
}

/* ===================================================================
   7. Card Grids
   =================================================================== */

.aman-grid {
  display: grid;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.aman-grid-2 { grid-template-columns: repeat(2, 1fr); }
.aman-grid-3 { grid-template-columns: repeat(3, 1fr); }
.aman-grid-4 { grid-template-columns: repeat(4, 1fr); }

.aman-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.aman-card-img {
  overflow: hidden;
  margin-bottom: 16px;
}

.aman-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.aman-card:hover .aman-card-img img {
  transform: scale(1.05);
}

.aman-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-text-dark);
  text-align: center;
  margin: 0 0 6px;
  line-height: 1.3;
}

.aman-card p {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 300;
  color: var(--color-text-light);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
/* ===================================================================
   Homepage Typography Standardization
   Override inline Times New Roman on index.html elements
   =================================================================== */

/* Welcome section */
.premium-title,
h2.premium-title {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em;
  color: var(--color-text-dark);
}

.premium-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-text-light) !important;
}

/* Intro lead paragraph */
.body-inner .lead {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
  color: var(--color-text-muted) !important;
  line-height: 1.8 !important;
}

/* Section headings (ROOM, DINE, etc.) that use inline Times */
.body-inner h2[style*="Times"],
.body-inner h3[style*="Times"],
.body-inner h4[style*="Times"] {
  font-family: var(--font-serif) !important;
}

/* What's On headings */
.body-inner h4 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
}

/* Section label uppercase text */
.body-inner h2.text-uppercase[style*="letter-spacing"],
.body-inner h2.text-uppercase {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  color: var(--color-text-light) !important;
}

/* "One More Summer Night" banner heading */
.body-inner h2.text-uppercase[style*="Times"] {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
}

/* Room title text */
.room-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* Body text in sections */
.body-inner p[style*="Times"],
.body-inner p[style*="font-size: 14px"],
.body-inner p[style*="font-size:14px"] {
  font-family: var(--font-serif) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--color-text-muted) !important;
}

/* Read More / Details links */
.body-inner a[style*="letter-spacing: 2px"] {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
}

/* Inline span labels (Cuisine:, Hours:, etc.) */
.body-inner span[style*="letter-spacing: 1px"] {
  font-family: var(--font-sans) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
}

/* ===================================================================
   Responsive — header spacing, grid, layout
   =================================================================== */

@media (max-width: 900px) {
  :root {
    --text-display:  2.6rem;
    --text-title:    2rem;
    --text-subtitle: 1.5rem;
  }

  .aman-header,
  .dine-header {
    padding: 130px 20px 30px;
  }

  .aman-hero,
  .dine-main-image {
    padding: 0 16px;
  }

  .aman-hero img,
  .dine-main-image img {
    height: 40vh;
    min-height: 280px;
  }

  .aman-section,
  .aman-section-alt {
    padding: 60px 24px;
  }

  .dine-outlets-wrapper {
    padding: 60px 24px;
  }

  .aman-side-by-side,
  .aman-side-by-side.reverse,
  .dine-outlet-block,
  .dine-outlet-block:nth-child(even) {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 64px;
  }

  .aman-sbs-media,
  .dine-outlet-media {
    flex: none;
    max-width: 100%;
  }

  .aman-sbs-media img,
  .dine-outlet-media img {
    min-height: 260px;
  }

  .aman-sbs-text,
  .dine-outlet-text {
    padding: 0;
  }

  .aman-grid-2,
  .aman-grid-3,
  .aman-grid-4 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .aman-side-by-side {
    gap: 40px;
  }

  .aman-sbs-media {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .aman-grid-3,
  .aman-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}