/* Layout Styles for Different Pages */

/* Index Page - Pathways Section */
.pathways-section {
  padding: 3rem 0;
  background-color: var(--color-milk);
}

.pathways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.pathway-card {
  background-color: white;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all 0.3s ease;
}

.pathway-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.pathway-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.pathway-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.pathway-content {
  padding: 1.5rem;
}

.pathway-content h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.pathway-content p {
  font-size: 0.95rem;
  color: var(--color-light-text);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.pathway-link {
  color: var(--color-gold);
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
}

.pathway-link:hover {
  color: var(--color-navy);
}

/* Maritime Rhythm Section */
.maritime-rhythm {
  padding: 3rem 0;
  background-color: var(--color-sand);
  margin: 2rem 0;
}

.rhythm-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.rhythm-content h2 {
  margin-bottom: 2rem;
  border: none;
  padding-bottom: 0;
  color: var(--color-navy);
}

.rhythm-content p {
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.9;
}

/* Spaces Preview */
.spaces-preview {
  padding: 3rem 0;
  margin: 2rem 0;
}

.spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.space-preview {
  text-align: center;
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.space-preview:hover {
  background-color: var(--color-cream);
}

.space-preview img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.space-preview h3 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.space-preview p {
  font-size: 0.95rem;
  color: var(--color-light-text);
}

/* Emotional Callout */
.emotional-callout {
  padding: 3rem 0;
  background-color: var(--color-sky);
  margin: 3rem 0;
}

.callout-quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  border: none;
  padding: 0;
  background: none;
}

.callout-quote p {
  font-size: 1.3rem;
  color: var(--color-navy);
  font-weight: 300;
  font-style: italic;
  line-height: 1.9;
}

.callout-quote footer {
  color: var(--color-text);
  margin-top: 1.5rem;
  font-style: normal;
  font-size: 1rem;
}

/* Routes Overview */
.routes-overview {
  padding: 3rem 0;
  margin: 2rem 0;
}

.routes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.route-item {
  background-color: var(--color-cream);
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.route-item:hover {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.route-item h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.route-item p {
  font-size: 0.95rem;
  color: var(--color-light-text);
  line-height: 1.7;
}

/* Contact Preview */
.contact-preview {
  padding: 3rem;
  background-color: var(--color-sand);
  text-align: center;
  margin: 3rem 0;
  border: 1px solid var(--color-border);
}

.contact-preview h2 {
  border: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.contact-preview p {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Concept Page - Two Column */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 2rem 0;
}

.left-column {
  order: 1;
}

.right-column {
  order: 2;
}

.concept-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Rhythm Blocks */
.rhythm-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.rhythm-block {
  background-color: var(--color-cream);
  padding: 2rem;
  border: 1px solid var(--color-border);
}

.rhythm-block h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.rhythm-block p {
  font-size: 0.95rem;
  color: var(--color-light-text);
  line-height: 1.7;
}

.rhythm-conclusion {
  text-align: center;
  font-style: italic;
  color: var(--color-text);
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--color-sand);
  border-left: 4px solid var(--color-gold);
}

/* Environment List */
.environment-list {
  background-color: var(--color-cream);
  padding: 2rem;
  border-left: 4px solid var(--color-gold);
  margin: 2rem 0;
}

.environment-list li {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* Editorial Transition */
.editorial-transition {
  background-color: var(--color-sand);
  padding: 2.5rem;
  margin: 3rem 0;
  border: 1px solid var(--color-border);
}

.editorial-transition h2 {
  border: none;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.editorial-transition p {
  font-size: 1rem;
  line-height: 1.8;
}

/* Concept Closing */
.concept-closing {
  padding: 2.5rem;
  background-color: var(--color-cream);
  margin: 3rem 0;
  text-align: center;
  border: 1px solid var(--color-border);
}

.closing-quote {
  border: none;
  padding: 0;
  background: none;
  text-align: center;
}

.closing-quote p {
  font-size: 1.15rem;
  color: var(--color-navy);
  font-style: italic;
  margin-bottom: 1rem;
}

.closing-note {
  font-style: normal;
  color: var(--color-text);
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Structure Content - Ship Page */
.structure-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin: 2rem 0;
}

.structure-image-right {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.structure-text h3 {
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.structure-text p {
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

/* Deck Levels */
.deck-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.deck-level {
  background-color: white;
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.deck-level:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.deck-level h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.deck-level p {
  font-size: 0.95rem;
  color: var(--color-light-text);
  line-height: 1.7;
}

/* Panoramic Section */
.panoramic-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin: 2rem 0;
}

.panoramic-text {
  order: 1;
}

.panoramic-image {
  order: 2;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Materials Grid */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.material-block {
  background-color: var(--color-cream);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.material-block h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.material-block p {
  font-size: 0.9rem;
  color: var(--color-light-text);
  line-height: 1.7;
}

/* Specifications */
.specifications {
  margin: 3rem 0;
}

.specs-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.spec {
  background-color: var(--color-sand);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  text-align: center;
}

.spec h4 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.spec p {
  color: var(--color-text);
  font-size: 0.95rem;
  margin: 0;
}

/* Ship Closing */
.ship-closing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin: 3rem 0;
}

.closing-image {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.closing-text {
  padding: 2rem;
  background-color: var(--color-cream);
}

.closing-text h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.closing-text p {
  color: var(--color-text);
  line-height: 1.8;
}

/* Journeys - Route Blocks */
.route-block {
  margin: 3rem 0;
  padding: 2.5rem;
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
}

.route-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 1rem;
}

.route-header h2 {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
}

.route-season {
  color: var(--color-gold);
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 600;
  margin: 0;
}

.route-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.route-image {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.route-text h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
  margin-top: 0;
}

.route-text p {
  color: var(--color-text);
  line-height: 1.8;
}

/* Time Experiences */
.time-experiences {
  margin: 3rem 0;
  padding: 2rem;
  background-color: var(--color-sand);
}

.time-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.time-block {
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.time-block h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.time-block p {
  color: var(--color-text);
  line-height: 1.7;
}

/* Maritime Character */
.maritime-character {
  padding: 2.5rem;
  background-color: var(--color-cream);
  margin: 3rem 0;
  border: 1px solid var(--color-border);
}

.character-content p {
  color: var(--color-text);
  line-height: 1.8;
}

/* Time of Day Sections - Onboard Page */
.time-of-day {
  margin: 3rem 0;
  padding: 2.5rem;
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
}

.time-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.time-text {
  order: 1;
}

.time-text h3,
.time-text p {
  color: var(--color-text);
}

.time-text p {
  line-height: 1.8;
}

.time-image {
  order: 2;
  width: 100%;
  height: 350px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.morning-section .time-image { order: 2; }
.morning-section .time-text { order: 1; }

.late-morning-section .time-image { order: 1; }
.late-morning-section .time-text { order: 2; }

.midday-section .time-image { order: 2; }
.midday-section .time-text { order: 1; }

.afternoon-section .time-image { order: 1; }
.afternoon-section .time-text { order: 2; }

.evening-section .time-image { order: 2; }
.evening-section .time-text { order: 1; }

.night-section .time-image { order: 1; }
.night-section .time-text { order: 2; }

.deep-night-section .time-image { order: 2; }
.deep-night-section .time-text { order: 1; }

/* Onboard Closing */
.onboard-closing {
  padding: 2.5rem;
  background-color: var(--color-sand);
  text-align: center;
  margin: 3rem 0;
}

.onboard-closing h2 {
  border: none;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.onboard-closing p {
  color: var(--color-text);
  line-height: 1.8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Spaces Page - Space Content */
.space-block {
  margin: 3rem 0;
  padding: 2.5rem;
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
}

.space-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.space-image-left {
  order: 1;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.space-image-right {
  order: 2;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.cabins-block .space-image-left { order: 1; }
.cabins-block .space-text { order: 2; }

.lounges-block .space-image-right { order: 2; }
.lounges-block .space-text { order: 1; }

.dining-block .space-image-left { order: 1; }
.dining-block .space-text { order: 2; }

.panoramic-block .space-image-right { order: 2; }
.panoramic-block .space-text { order: 1; }

.space-text h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.space-text p {
  color: var(--color-text);
  line-height: 1.8;
}

/* Materials and Design */
.materials-content {
  margin: 2rem 0;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.material-item {
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.material-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.material-item h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.material-item p {
  color: var(--color-light-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Design Philosophy */
.design-philosophy {
  padding: 2.5rem;
  background-color: var(--color-sand);
  margin: 2rem 0;
}

.philosophy-list {
  background-color: white;
  padding: 2rem;
  border-left: 4px solid var(--color-gold);
  margin: 1.5rem 0;
}

.philosophy-list li {
  color: var(--color-text);
  line-height: 1.7;
}

/* Spaces Closing */
.spaces-closing {
  padding: 2.5rem;
  background-color: var(--color-cream);
  text-align: center;
  margin: 3rem 0;
}

.spaces-closing h2 {
  border: none;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* Atmosphere Page - Blocks */
.atmosphere-block {
  margin: 3rem 0;
  padding: 2.5rem;
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
}

.atmosphere-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.atmosphere-text {
  order: 1;
  color: var(--color-text);
  line-height: 1.8;
}

.atmosphere-text p {
  color: var(--color-text);
}

.atmosphere-image-full {
  order: 2;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.horizon-block .atmosphere-content { grid-template-columns: 1fr 1fr; }
.horizon-block .atmosphere-text { order: 1; }
.horizon-block .atmosphere-image-full { order: 2; }

.sunrise-block .atmosphere-image-full { order: 1; }
.sunrise-block .atmosphere-text { order: 2; }

.evening-block .atmosphere-text { order: 1; }
.evening-block .atmosphere-image-full { order: 2; }

.observation-block .atmosphere-image-full { order: 1; }
.observation-block .atmosphere-text { order: 2; }

.night-block .atmosphere-text { order: 1; }
.night-block .atmosphere-image-full { order: 2; }

/* Special Moments */
.special-moments {
  padding: 2rem;
  background-color: var(--color-sand);
}

.special-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.special-moment {
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.special-moment:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.special-moment h3 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.special-moment p {
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Light and Shadow */
.light-shadow {
  padding: 2.5rem;
  background-color: var(--color-sky);
}

.light-content {
  color: var(--color-text);
  line-height: 1.8;
}

/* Atmosphere Closing */
.atmosphere-closing {
  padding: 2.5rem;
  background-color: var(--color-sand);
  text-align: center;
  margin: 3rem 0;
}

.closing-content {
  max-width: 900px;
  margin: 0 auto;
}

.atmosphere-quote {
  border: none;
  padding: 0;
  background: none;
  text-align: center;
}

.atmosphere-quote p {
  font-size: 1.1rem;
  color: var(--color-navy);
  font-style: italic;
  margin-bottom: 1rem;
}

.atmosphere-quote footer {
  color: var(--color-text);
  font-style: normal;
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.contact-item {
  background-color: var(--color-cream);
  padding: 2rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.contact-item:hover {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-item h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.contact-item p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

.contact-link {
  color: var(--color-gold);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-link:hover {
  color: var(--color-navy);
}

.contact-note {
  font-size: 0.85rem;
  color: var(--color-light-text);
  margin-top: 0.5rem;
}

/* Contact Form Section */
.contact-form-section {
  margin: 3rem 0;
}

/* Info Boxes */
.info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.info-box {
  background-color: var(--color-cream);
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
}

.info-box h3 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.info-box p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Resources */
.contact-resources {
  margin: 3rem 0;
  padding: 2rem;
  background-color: var(--color-sand);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.resource-item {
  background-color: white;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.resource-item h3 {
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.resource-item p {
  font-size: 0.9rem;
  color: var(--color-light-text);
  margin-bottom: 1rem;
}

.resource-link {
  color: var(--color-gold);
  font-weight: 600;
  transition: all 0.3s ease;
}

.resource-link:hover {
  color: var(--color-navy);
}

/* Policy Pages */
.policy-page {
  min-height: calc(100vh - 200px);
}

.policy-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 20px;
}

.policy-page h1 {
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.policy-date {
  color: var(--color-light-text);
  font-style: italic;
  margin-bottom: 2rem;
}

.policy-section {
  margin: 2rem 0;
}

.policy-section h2 {
  border: none;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  color: var(--color-navy);
  font-size: 1.5rem;
  border-bottom: 2px solid var(--color-gold);
}

.policy-list {
  background-color: var(--color-cream);
  padding: 1.5rem;
  border-left: 4px solid var(--color-gold);
  margin: 1rem 0;
}

.policy-list li {
  color: var(--color-text);
  line-height: 1.8;
}

.policy-footer {
  text-align: center;
  color: var(--color-light-text);
  font-style: italic;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}