/*-----------------------------------*\
  #about.css
\*-----------------------------------*/

/* Subtitle line helper (reused from home) */
.section-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.subtitle-line {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--emerald);
  border-radius: 2px;
  flex-shrink: 0;
}

/*-----------------------------------*\
  #ABOUT INTRO
\*-----------------------------------*/

.about-intro { background-color: var(--white); }

.about-intro-grid {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.about-intro-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px hsla(0,0%,0%,0.15);
  max-width: 560px;
  margin-inline: auto;
}

.about-intro-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.about-intro-img-wrap:hover .about-intro-img { transform: scale(1.04); }

.about-years-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: linear-gradient(135deg, hsl(152,95%,28%), hsl(152,95%,18%));
  color: var(--white);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px hsla(152,95%,20%,0.45);
  animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.about-years-badge strong {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--ff-playfair-display);
  line-height: 1;
}

.about-years-badge span {
  font-size: 1.2rem;
  opacity: 0.85;
  text-align: center;
  margin-block-start: 4px;
}

.about-intro-content { display: flex; flex-direction: column; gap: 0; }

.about-intro-text {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.85;
  margin-block-end: 16px;
}

.about-intro-text strong { color: var(--russian-violet); font-weight: var(--fw-700); }

.about-values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 20px;
}

.about-value-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--mint-cream);
  color: var(--gunmetal-2);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid hsl(152,95%,85%);
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.about-value-chip ion-icon { color: var(--emerald); font-size: 1.6rem; }

.about-value-chip:hover {
  background-color: var(--emerald);
  color: var(--white);
  transform: translateY(-3px);
}

.about-value-chip:hover ion-icon { color: var(--white); }

/*-----------------------------------*\
  #VISION & MISSION
\*-----------------------------------*/

.vision-mission { background-color: var(--mint-cream); }

.vm-grid {
  display: grid;
  gap: 24px;
  margin-block-start: 40px;
}

.vm-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px hsla(0,0%,0%,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vm-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}

.vision-card::before  { background: linear-gradient(90deg, var(--emerald), hsl(152,95%,55%)); }
.mission-card::before { background: linear-gradient(90deg, hsl(245,97%,40%), var(--russian-violet)); }
.values-card::before  { background: linear-gradient(90deg, hsl(36,100%,50%), hsl(36,100%,65%)); }

.vm-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px hsla(0,0%,0%,0.12);
}

.vm-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background-color: var(--mint-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  color: var(--emerald);
  margin-block-end: 20px;
  transition: transform 0.3s ease;
}

.vm-card:hover .vm-icon { transform: rotate(-8deg) scale(1.1); }

.vm-title {
  color: var(--russian-violet);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  margin-block-end: 14px;
  font-family: var(--ff-playfair-display);
}

.vm-text {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.85;
}

.vm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vm-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sonic-silver);
  font-size: var(--fs-6);
}

.vm-list li ion-icon { color: var(--emerald); font-size: 1.8rem; flex-shrink: 0; }

/*-----------------------------------*\
  #FARM LOCATIONS
\*-----------------------------------*/

.farm-section { background-color: var(--white); }

.farm-grid {
  display: grid;
  gap: 24px;
  margin-block-start: 40px;
}

.farm-card {
  border: 2px solid var(--platinum);
  border-radius: 16px;
  padding: 32px 26px;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.farm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsla(152,95%,39%,0.04), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.farm-card:hover {
  border-color: var(--emerald);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px hsla(152,95%,39%,0.12);
}

.farm-card:hover::after { opacity: 1; }

.farm-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--emerald), hsl(152,95%,22%));
  color: var(--white);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin-block-end: 18px;
  transition: transform 0.3s ease;
}

.farm-card:hover .farm-icon { transform: rotate(-8deg) scale(1.1); }

.farm-name {
  color: var(--russian-violet);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  margin-block-end: 12px;
  font-family: var(--ff-playfair-display);
}

.farm-desc {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.8;
  margin-block-end: 20px;
}

.farm-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.farm-highlights li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gunmetal-2);
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

.farm-highlights li ion-icon { color: var(--emerald); font-size: 1.8rem; }

/*-----------------------------------*\
  #TEAM / BOARD MEMBERS
\*-----------------------------------*/

.team-section { background-color: var(--mint-cream); }

.team-grid {
  display: grid;
  gap: 24px;
  margin-block-start: 40px;
}

.team-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 20px hsla(0,0%,0%,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px hsla(0,0%,0%,0.12);
}

.team-avatar-wrap { display: flex; justify-content: center; }

.team-avatar-placeholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald), hsl(152,95%,22%));
  color: var(--white);
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px hsla(152,95%,39%,0.3);
}

.team-info { display: flex; flex-direction: column; gap: 6px; text-align: center; }

.team-name {
  color: var(--russian-violet);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  font-family: var(--ff-playfair-display);
}

.team-role {
  color: var(--emerald);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
}

.team-bio {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.75;
  margin-block: 8px;
}

.team-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 8px;
}

.team-contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--gunmetal-2);
  font-size: var(--fs-7);
  transition: color 0.3s ease;
  word-break: break-all;
}

.team-contact-link:hover { color: var(--emerald); }
.team-contact-link ion-icon { color: var(--emerald); flex-shrink: 0; }

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

@media (min-width: 768px) {
  .about-intro-grid { flex-direction: row; align-items: center; gap: 60px; }
  .about-intro-img-wrap { flex: 0 0 45%; max-width: 45%; margin-inline: 0; }
  .about-intro-img { height: 460px; }
  .vm-grid { grid-template-columns: 1fr 1fr 1fr; }
  .farm-grid { grid-template-columns: 1fr 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr 1fr; }
  .team-info { text-align: left; }
  .team-avatar-wrap { justify-content: flex-start; }
  .team-contact-link { justify-content: flex-start; }
}


/*-----------------------------------*\
  #RESPONSIVE FIXES — about.css
\*-----------------------------------*/

@media (max-width: 480px) {

  /* About intro */
  .about-intro-img { height: 260px; }

  .about-intro-grid { gap: 30px; }

  /* Hide small secondary image — clips at narrow widths */
  .about-values-row { gap: 8px; }

  .about-value-chip { font-size: var(--fs-8); padding: 6px 12px; }

  /* VM cards */
  .vm-card { padding: 28px 20px; }

  .vm-title { font-size: var(--fs-4); }

  /* Farm cards */
  .farm-card { padding: 24px 18px; }

  .farm-name { font-size: var(--fs-4); }

  /* Team cards */
  .team-card { padding: 24px 18px; }

  .team-name { font-size: var(--fs-4); }

  /* Badge: shrink on small screens */
  .about-years-badge { bottom: 12px; left: 12px; padding: 10px 14px; }

  .about-years-badge strong { font-size: 2rem; }

}

/* Intermediate: 480px–768px: 2-col for vm/farm/team */
@media (min-width: 480px) and (max-width: 767px) {
  .vm-grid    { grid-template-columns: 1fr 1fr; }
  .farm-grid  { grid-template-columns: 1fr 1fr; }
  .team-grid  { grid-template-columns: 1fr 1fr; }
}


/*-----------------------------------*\
  #COMPREHENSIVE RESPONSIVE — about.css
\*-----------------------------------*/

/* ======== 320px – 359px ======== */
@media (max-width: 359px) {
  /* About intro */
  .about-intro-img { height: 200px; }
  .about-intro-grid { gap: 24px; }
  .about-intro-content { gap: 0; }
  .about-intro-text    { font-size: var(--fs-7); }
  .about-years-badge   { bottom: 8px; left: 8px; padding: 8px 10px; }
  .about-years-badge strong { font-size: 1.6rem; }
  .about-years-badge span   { font-size: 1rem; }
  .about-value-chip    { font-size: var(--fs-9); padding: 5px 10px; }

  /* Vision & Mission */
  .vm-card  { padding: 22px 14px; }
  .vm-title { font-size: var(--fs-5); }
  .vm-text  { font-size: var(--fs-7); }
  .vm-icon  { width: 48px; height: 48px; font-size: 2.2rem; }
  .vm-list li { font-size: var(--fs-7); }

  /* Farm */
  .farm-card  { padding: 20px 14px; }
  .farm-name  { font-size: var(--fs-4); }
  .farm-desc  { font-size: var(--fs-7); }
  .farm-highlights li { font-size: var(--fs-8); }
  .farm-icon  { width: 46px; height: 46px; font-size: 2rem; }

  /* Team */
  .team-card  { padding: 20px 14px; }
  .team-name  { font-size: var(--fs-4); }
  .team-bio   { font-size: var(--fs-7); }
  .team-contact-link  { font-size: var(--fs-8); word-break: break-all; }
  .team-avatar-placeholder { width: 72px; height: 72px; font-size: 3.2rem; }
}

/* ======== 360px – 479px ======== */
@media (min-width: 360px) and (max-width: 479px) {
  .about-intro-img     { height: 240px; }
  .about-years-badge   { bottom: 12px; left: 12px; padding: 10px 14px; }
  .about-years-badge strong { font-size: 2rem; }
  .about-value-chip    { font-size: var(--fs-8); padding: 6px 12px; }

  .vm-grid   { grid-template-columns: 1fr; }
  .vm-card   { padding: 26px 18px; }

  .farm-grid { grid-template-columns: 1fr; }
  .farm-card { padding: 24px 16px; }

  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 24px 16px; }
  .team-info { text-align: center; }
  .team-contact-link { justify-content: center; }
  .team-avatar-wrap  { justify-content: center; }
}

/* ======== 480px – 575px ======== */
@media (min-width: 480px) and (max-width: 575px) {
  .about-intro-img     { height: 280px; }
  .about-years-badge strong { font-size: 2.2rem; }

  .vm-grid   { grid-template-columns: 1fr 1fr; }
  .vm-grid .values-card { grid-column: 1 / -1; } /* full width */

  .farm-grid { grid-template-columns: 1fr 1fr; }
  .farm-grid .farm-card:last-child { grid-column: 1 / -1; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid .team-card:last-child { grid-column: 1 / -1; }
}

/* ======== 576px – 767px ======== */
@media (min-width: 576px) and (max-width: 767px) {
  .about-intro-img     { height: 320px; }
  .about-intro-grid    { flex-direction: column; gap: 40px; }
  .about-intro-img-wrap { max-width: 100%; }

  .vm-grid   { grid-template-columns: 1fr 1fr; }
  .vm-grid .values-card { grid-column: 1 / -1; }

  .farm-grid { grid-template-columns: 1fr 1fr; }
  .farm-grid .farm-card:last-child { grid-column: 1 / -1; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid .team-card:last-child { grid-column: 1 / -1; }
  .team-info { text-align: center; }
  .team-contact-link { justify-content: center; }
  .team-avatar-wrap  { justify-content: center; }
}

/* ======== 768px – 991px ======== */
@media (min-width: 768px) and (max-width: 991px) {
  .about-intro-grid { flex-direction: row; gap: 44px; align-items: center; }
  .about-intro-img-wrap { flex: 0 0 44%; max-width: 44%; }
  .about-intro-img  { height: 400px; }

  .vm-grid   { grid-template-columns: repeat(3, 1fr); }
  .farm-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }

  .team-info     { text-align: left; }
  .team-avatar-wrap { justify-content: flex-start; }
  .team-contact-link { justify-content: flex-start; }
}

/* ======== 992px+ ======== */
@media (min-width: 992px) {
  .about-intro-grid { flex-direction: row; gap: 60px; align-items: center; }
  .about-intro-img-wrap { flex: 0 0 46%; max-width: 46%; }
  .about-intro-img  { height: 460px; }
  .vm-grid   { grid-template-columns: repeat(3, 1fr); }
  .farm-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-info { text-align: left; }
  .team-avatar-wrap  { justify-content: flex-start; }
  .team-contact-link { justify-content: flex-start; }
}

/* ======== Touch-friendly chips ======== */
@media (hover: none) {
  .about-value-chip:hover { background-color: var(--mint-cream); color: var(--gunmetal-2); transform: none; }
}

/* ======== Section title alignment on mobile ======== */
@media (max-width: 575px) {
  .section-title { text-align: center !important; }
  .about-intro-content .section-subtitle { justify-content: center; }
}