/* ================================
   ABOUT PAGE STYLES
   Page-specific styles for about.html
   ================================ */

/* Hero Section */
.about-hero {
  background: var(--hero-gradient);
  color: var(--text-white);
  text-align: center;
  padding: 8rem 1.5rem 4rem;
}

.about-hero-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  margin-bottom: 1rem;
}

.about-hero-subtitle {
  font-size: var(--text-xl);
  color: var(--hero-text-muted);
  max-width: 36rem;
  margin: 0 auto;
}

/* About Section Title */
.about-section-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  margin-bottom: 2rem;
}

/* Narrow Container */
.container-narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Owner Content - Magazine Layout */
.owner-content {
  overflow: hidden;
}

.owner-content p {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1.5rem;
}

.owner-content p:last-of-type {
  margin-bottom: 0;
}

/* Owner Photos */
.owner-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.owner-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.owner-photo figcaption {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
}

/* Photo Size Variants */
.owner-photo-large {
  width: 220px;
}

.owner-photo-medium {
  width: 180px;
}

.owner-photo-small {
  width: 140px;
}

/* Photo Position Variants */
.owner-photo-left {
  float: left;
  margin: 0 2rem 1.25rem 0;
  shape-outside: margin-box;
}

.owner-photo-right {
  float: right;
  margin: 0 0 1.25rem 2rem;
  shape-outside: margin-box;
}

.owner-photo-center {
  float: none;
  clear: both;
  margin: 2.5rem auto 0;
  display: block;
}

/* About Content (Trust Section) */
.about-content {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
}

.about-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.about-content p {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .about-hero {
    padding: 6rem 1rem 3rem;
  }

  .about-hero-title {
    font-size: var(--text-3xl);
  }

  .about-hero-subtitle {
    font-size: var(--text-lg);
  }

  .about-section-title {
    font-size: var(--text-xl);
    margin-bottom: 1.5rem;
  }

  .owner-content p {
    font-size: var(--text-sm);
  }

  .owner-photo-left,
  .owner-photo-right {
    float: none;
    margin: 0 auto 1.5rem;
    display: block;
  }

  .owner-photo-large,
  .owner-photo-medium {
    width: 200px;
    max-width: 80%;
  }

  .owner-photo-small {
    width: 140px;
    max-width: 60%;
  }

  .owner-photo-center {
    margin-top: 1.5rem;
  }

  .about-content h2 {
    font-size: var(--text-xl);
  }
}

@media (max-width: 480px) {
  .about-hero {
    padding: 5rem 1rem 2.5rem;
  }

  .owner-photo-large,
  .owner-photo-medium,
  .owner-photo-small {
    width: 100%;
    max-width: 240px;
  }
}