/*
|==========================================================================
| 5-page-about.css
|
| STYLES UNIQUE TO THE ABOUT US PAGE
|==========================================================================
*/

/* --- Base Body Class for Page Specific Overrides --- */
.page-about {
  /* Inherits most base styles from 0-base.css and 4-sections.css */
}

/* --- About Hero Section (New for a cleaner intro) --- */
.page-about .about-hero-section {
  background-color: #f2f2f0; /* Use base light background or a softer tone */
  padding: 150px 0 80px 0; /* Extra top padding for header clearance */
  text-align: center;
  color: #333;
}

.page-about .about-hero-section h2 {
  font-size: 2.5em;
  margin-bottom: 5px;
  color: #587D71;
}

.page-about .about-hero-section p {
  font-size: 1.2em;
  color: #333;
}

/* --- Story Section (Two-column layout) --- */
.page-about .story-section {
  padding: 80px 0;
  background-color: #ece9e5; /* Using Section 3/4/5 override color from 4-sections.css */
}

.page-about .story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.page-about .story-text h3 {
  font-size: 2em;
  margin-bottom: 20px;
}

.page-about .story-image-placeholder {
  height: 400px;
  background-color: #D6C7AE; /* Placeholder for an actual image */
  background-image: url('/img/about-story-placeholder.jpg'); /* Replace with your actual image path */
  background-size: cover;
  background-position: center;
}

/* --- Farmhouse/Dark Section (Used for Stay/Accommodation Highlight) --- */
.page-about .farmhouse-section {
  background-color: #587D71; /* A new dark tone from your palette */
  color: #FFF;
  padding: 100px 0;
}

.page-about .farmhouse-section h3 {
  color: #FFF;
  font-size: 2.2em;
}

.page-about .farmhouse-section .section-lead {
  color: #F8F7F3;
}

.page-about .farmhouse-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.page-about .farmhouse-features article {
  flex-basis: 45%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-about .farmhouse-features h4 {
  color: #FFF;
  font-size: 1.2em;
}

.page-about .farmhouse-features p {
  color: #F8F7F3;
  font-size: 0.9em;
}

/* --- Values Section (Grid of icons/points) --- */
.page-about .values-section {
  padding: 80px 0;
  text-align: center;
}

.page-about .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.page-about .value-item i {
  font-size: 3em;
  color: #D6C7AE;
  margin-bottom: 15px;
}

.page-about .value-item h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #587D71;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
  .page-about .story-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-about .story-image-placeholder {
    height: 250px;
    order: -1; /* Place image above text on mobile */
  }

  .page-about .farmhouse-features {
    flex-direction: column;
    gap: 20px;
  }

  .page-about .farmhouse-features article {
    padding: 15px;
  }
}