/* File: src/css/specific/about.css
   Purpose: Responsive About page to match site scale and spacing
*/

:root { --content-pad: 20px; }

.content.about-page {
  padding: var(--content-pad);
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.15rem);
}

/* Centered readable column */
.about-wrap {
  max-width: 920px;
  margin: 0 auto;
}

/* Headings and rhythm */
.about-wrap h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin: 0 0 12px;
}
.about-wrap h3 {
  font-size: clamp(1.2rem, 1.4vw, 1.35rem);
  margin: 20px 0 10px;
}

.about-wrap p {
  margin: 0 0 14px;
  line-height: 1.65;
  opacity: .95;
}

.about-wrap .lede {
  font-size: clamp(1.05rem, 1.2rem + 0.25vw, 1.25rem);
  opacity: 1;
}

/* Rule */
.about-wrap .rule {
  margin: 22px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* Links list */
.about-links {
  list-style: disc;
  padding-left: 20px;
}
.about-links li { margin: 6px 0; }
.about-links a { text-decoration: underline; }

/* Platform bullets */
.about-bullets {
  margin: 8px 0 16px 20px;
  list-style: disc;
}
.about-bullets li { margin: 6px 0; }

/* ——— Responsive wide screens ——— */

/* 1440p */
@media (min-width: 1440px) {
  .about-wrap { max-width: 1100px; }
  .content.about-page { font-size: clamp(1.08rem, 0.8rem + 0.5vw, 1.35rem); }
  .about-wrap .lede { font-size: clamp(1.15rem, 1.1rem + 0.4vw, 1.35rem); }
}

/* 1920p (FHD) */
@media (min-width: 1920px) {
  .about-wrap { max-width: 1280px; }
  .content.about-page { font-size: clamp(1.12rem, 0.9rem + 0.6vw, 1.45rem); }
  .about-wrap .lede { font-size: clamp(1.2rem, 1rem + 0.55vw, 1.45rem); }
}

/* 2560p (QHD/2.5K) */
@media (min-width: 2560px) {
  .about-wrap { max-width: 1600px; }
  .content.about-page { font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem); }
  .about-wrap .lede { font-size: clamp(1.28rem, 1.05rem + 0.9vw, 1.7rem); }
}

/* 3840p (4K) */
@media (min-width: 3840px) {
  .about-wrap { max-width: 1800px; }
  .content.about-page { font-size: clamp(1.28rem, 0.9rem + 1.2vw, 1.9rem); }
  .about-wrap .lede { font-size: clamp(1.35rem, 1.0rem + 1.3vw, 2.0rem); }
}