/* ==========================================================================
   Pradeep Hingorani — About page design (scoped under body.ph-about)
   Ported 1:1 from about.html. Loaded on top of ph-home.css, which supplies
   the shared chrome (.ph, .ph-wrap, .ph-header, .ph-nav, .ph-lang, .ph-logo,
   .ph-marginalia, .ph-cta, .ph-footer, .ph-caption, .ph-reveal).
   ========================================================================== */

/* ============ BASE ============ */
.ph-about{
  --ph-text-max:720px;
}

body.ph-about{
  background:var(--ph-ivory);
  color:var(--ph-charcoal);
  font-family:var(--ph-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Headings keep the design's charcoal (Astra otherwise colours them). */
.ph-about .ph-about-title,
.ph-about .ph-section-heading,
.ph-about .closing-statement,
.ph-about .ph-category-title{
  color:var(--ph-charcoal);
}

/* ============ SECTION RHYTHM ============ */
.ph-about .ph-section{ padding:90px 0; }
.ph-about .ph-section.tight{ padding:60px 0; }
.ph-about .ph-about-oman{ padding:0; }
.ph-about .ph-about-closing{ padding:110px 0 60px; }

/* ============ HERO ============ */
.ph-about-hero .ph-about-hero-grid{
  display:grid !important;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.ph-about-hero-grid > .wp-block-column{ min-width:0; }
.ph-about-title{
  font-family:var(--ph-display);
  font-weight:500;
  font-size:clamp(34px, 4.4vw, 56px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin-bottom:24px;
}
.ph-about-hero-sub{
  font-size:17px;
  color:var(--ph-charcoal-soft);
  max-width:46ch;
}

/* ============ PHOTO FRAMES (Cover blocks) ============
   Each frame is a Cover block (click-to-upload in the editor). Without an
   image it shows the gradient fallback + caption; with one, the inline
   background-image covers the frame (background-size rules after shorthand). */
.ph-photo-frame{
  min-height:0 !important;              /* beat the cover's inline 430px */
  aspect-ratio:4/5;
  position:relative;
  border:1px solid var(--ph-hairline);
  padding:0;
  background:
    repeating-linear-gradient(135deg, var(--ph-ivory-deep), var(--ph-ivory-deep) 2px, transparent 2px, transparent 14px),
    linear-gradient(160deg, #E4DCC9, #D8CEB6);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ph-photo-frame .wp-block-cover__inner-container{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ph-photo-frame .ph-caption{
  position:absolute;
  left:16px;
  bottom:16px;
}
.ph-oman-photo{ aspect-ratio:16/8; }

/* ============ TEXT SECTIONS ============ */
.ph-about .text-block{ max-width:var(--ph-text-max); }
.ph-about .text-block p:not(.ph-marginalia){
  font-size:17px;
  color:var(--ph-charcoal-soft);
  margin-bottom:20px;
}
.ph-about .ph-eyebrow{
  display:block;
  margin-bottom:22px;
}
.ph-section-heading{
  font-family:var(--ph-display);
  font-weight:500;
  font-size:clamp(28px, 3.2vw, 42px);
  line-height:1.15;
  margin-bottom:28px;
  max-width:18ch;
}

/* ============ PULL QUOTE ============ */
.ph-about .ph-wrap blockquote.ph-pullquote{
  margin:50px 0;
  padding:0 0 0 26px;
  border:0;
  border-left:2px solid var(--ph-terracotta);
  font-family:var(--ph-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.4;
  color:var(--ph-charcoal);
  max-width:14ch;
}
.ph-about .ph-wrap blockquote.ph-pullquote p{ margin:0; }

/* ============ SECTION BACKGROUNDS ============ */
.ph-about-origin{ background:var(--ph-ivory-deep); }
.ph-about-perspective{ background:var(--ph-ivory-deep); }

/* ============ OMAN — full bleed ============ */
.ph-about-oman .ph-oman-photo{
  width:100%;
  border-top:1px solid var(--ph-hairline);
  border-bottom:1px solid var(--ph-hairline);
}
.ph-about-oman .oman-text{ padding:70px 0; }

/* ============ BLOG / WHY ============ */
.ph-about-blog .text-block{ max-width:640px; }

/* ============ WHAT YOU'LL FIND ============ */
.ph-about .ph-about-categories .ph-eyebrow{ margin-bottom:32px; }
.ph-about-categories-grid{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
  margin-top:20px;
}
.ph-about-categories-grid > .wp-block-column{ min-width:0; }
.ph-about-categories-grid .ph-category-title{
  font-family:var(--ph-display);
  font-weight:500;
  font-size:18px;
  margin-bottom:10px;
  letter-spacing:0.02em;
}
.ph-about-categories-grid .ph-category-body{
  font-size:14px;
  color:var(--ph-warm-gray);
  line-height:1.55;
}

/* ============ CLOSING ============ */
.ph-about-closing{ text-align:center; }
.closing-statement{
  font-family:var(--ph-display);
  font-weight:500;
  font-size:clamp(26px, 3.6vw, 40px);
  line-height:1.4;
  max-width:16ch;
  margin:0 auto 26px;
}
.closing-sub{
  font-family:var(--ph-display);
  font-style:italic;
  font-weight:400;
  font-size:19px;
  color:var(--ph-charcoal-soft);
  max-width:36ch;
  margin:0 auto;
}
.whatsapp-line{
  margin-top:56px;
  font-size:15px;
  color:var(--ph-charcoal-soft);
}
.whatsapp-line a{
  font-weight:600;
  color:var(--ph-terracotta);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:opacity .2s ease;
}
.whatsapp-line a:hover{ opacity:.7; }
.final-nav{
  margin-top:60px;
  padding-top:40px;
  border-top:1px solid var(--ph-hairline);
}
.ph-about .final-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.04em;
  padding-bottom:3px;
  border-bottom:1px solid var(--ph-charcoal);
  transition:gap .25s ease, border-color .25s ease, color .25s ease;
}
.ph-about .final-cta:hover,
.ph-about .final-cta:focus-visible{
  gap:14px;
  border-color:var(--ph-terracotta);
  color:var(--ph-terracotta);
}

/* ============ NAV CURRENT ============ */
.ph-about .ph-nav a.current{
  opacity:1;
  color:var(--ph-terracotta);
}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .ph-about-hero .ph-about-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .ph-about-hero .ph-hero-photo-col{ order:-1; max-width:320px; }
  .ph-about-categories-grid{ grid-template-columns:1fr 1fr; gap:28px 24px; }
}
@media (max-width:640px){
  .ph-about .ph-section{ padding:56px 0; }
  .ph-about .ph-section.tight{ padding:40px 0; }
  .ph-about .ph-about-closing{ padding:70px 0 40px; }
  .ph-oman-photo{ aspect-ratio:4/5; }
  .ph-about-oman .oman-text{ padding:50px 0; }
}
@media (max-width:480px){
  .ph-about-categories-grid{ grid-template-columns:1fr; }
}

/* ============ ASTRA WRAPPER NEUTRALISATION (About copy) ============ */
body.ph-about #content,
body.ph-about #content .ast-container,
body.ph-about #primary,
body.ph-about #main,
body.ph-about article,
body.ph-about .ast-article-single,
body.ph-about .entry-content{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:none;
  box-shadow:none;
  background:transparent;
}
body.ph-about .entry-header{ display:none !important; }

/* ============ GERMAN TYPOGRAPHY ============
   German runs longer — display sizes a step down (as in the home CSS). */
html[lang^="de"] .ph-about .ph-about-title{
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.16;
}
html[lang^="de"] .ph-about .ph-section-heading{
  font-size:clamp(24px, 2.8vw, 36px);
}
html[lang^="de"] .ph-about .closing-statement{
  font-size:clamp(23px, 3vw, 34px);
}