/* ============================================================
   Inner pages - services index + detail, about, insights,
   contact. Loaded everywhere except the front page (home.css
   takes that slot); shared primitives live in base.css.
   ============================================================ */

/* ---- Page hero: every inner page opens on the deep navy ---- */
.page-hero { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.page-hero .page-title { max-width: 24ch; }
.page-hero .lead { margin-top: var(--space-6); max-width: var(--measure-narrow); }
/* Inner-page H1s sit a step below the home display scale; the rest of
   the display treatment (weight, tracking, Thai headroom) inherits from
   the h1 rules in base.css. */
.page-title { font-size: clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem); line-height: 1.1; }
:lang(th) .page-title { line-height: 1.24; }
.crumb { color: inherit; }
.crumb:hover { color: var(--blue-300); text-decoration: none; }
.crumb::after { content: " /"; opacity: 0.55; }

/* ---- Services index: full-width rows ---- */
.service-rows { display: flex; flex-direction: column; }
/* The 6/4 editorial row is one geometry with two skins: the services index
   and an Insights row that has a cover. Same reasoning as the Card Flood
   Rule - a new row type joins this list, it does not restate the split. */
.service-row,
.post-item-link.has-cover {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.service-row-media,
.post-item-media { aspect-ratio: 3 / 2; }
.service-row {
  padding-block: var(--space-12);
  border-top: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}
.service-row:last-child { border-bottom: 1px solid var(--hairline); }
.service-row:hover { text-decoration: none; background: var(--paper-tint); }
.service-row-body h2 { max-width: 22ch; }
.service-row-body p { margin: var(--space-4) 0 var(--space-6); max-width: var(--measure-narrow); }
.service-row-body .arrow-link { color: var(--blue-700); }

/* ---- Detail pages (service + about): copy left, media right ---- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.detail-copy h2 { max-width: 24ch; }
.detail-copy h2 + p, .detail-copy .point-list { margin-top: var(--space-6); }
.service-narrative { margin-top: var(--space-6); }
.service-narrative p { max-width: var(--measure-narrow); }
.service-scope { margin-top: var(--space-8); }
.service-scope h3 { margin-bottom: var(--space-4); }
.detail-media { margin: 0; position: sticky; top: var(--space-8); }
.detail-media .media-crop { aspect-ratio: 4 / 3; }

/* Scope list: hairline rows, McKinsey agenda rhythm. */
.point-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure-narrow); }
.point-list li {
  padding-block: var(--space-4);
  border-top: 1px solid var(--hairline);
  color: var(--ink);
}
.point-list li { font-weight: 500; }
.point-list li:last-child { border-bottom: 1px solid var(--hairline); }

/* ---- Cross-links to the other services ---- */
.other-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.other-service {
  display: block;
  border-top: 2px solid var(--blue-700);
  padding-top: var(--space-4);
  color: inherit;
  text-decoration: none;
}
.other-service:hover { text-decoration: none; }
.other-service h3 { transition: color var(--dur) var(--ease-out); }
.other-service:hover h3 { color: var(--blue-700); }
.other-service .arrow-link { margin-top: var(--space-3); }

/* ---- Insights index ---- */
.post-list { display: flex; flex-direction: column; }
.post-item { border-top: 1px solid var(--hairline); }
.post-item:last-child { border-bottom: 1px solid var(--hairline); }
.post-item-link { display: block; padding-block: var(--space-8); color: inherit; text-decoration: none; }
.post-item-link:hover { text-decoration: none; }
/* .has-cover only opts the row into the shared editorial row above; the plain
   single-column row is the default, because the client may never set a cover. */
.post-date { color: var(--muted); }
.post-item-title { margin-top: var(--space-2); max-width: 30ch; transition: color var(--dur) var(--ease-out); }
.post-item-link:hover .post-item-title { color: var(--blue-700); }
.post-item-excerpt { margin-top: var(--space-3); max-width: var(--measure); }
.post-item-excerpt p { margin: 0; color: var(--body-color); }
.post-item .arrow-link { margin-top: var(--space-4); }

.post-empty h2 { max-width: 26ch; }
.post-empty .lead { margin-top: var(--space-6); }
.post-empty .arrow-link { margin-top: var(--space-6); }
.other-service .arrow-link, .post-item .arrow-link, .post-empty .arrow-link { color: var(--blue-700); }
.other-service .arrow-link, .post-item .arrow-link { font-size: var(--small-size); }

.pagination { margin-top: var(--space-12); }
.pagination .nav-links { display: flex; gap: var(--space-4); align-items: center; }
.pagination .page-numbers {
  min-width: 2.5rem; height: 2.5rem;
  display: inline-grid; place-content: center;
  border: 1px solid var(--hairline);
  color: var(--body-color);
}
.pagination .page-numbers.current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--blue-700); color: var(--blue-700); text-decoration: none; }

/* ---- Post body: styles whatever the wp-admin editor produces ---- */
.post-cover, .post-body { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.post-cover { aspect-ratio: 3 / 2; margin-bottom: var(--space-12); }
.post-body h2 { margin-top: var(--space-12); }
.post-body h3 { margin-top: var(--space-8); }
.post-body h2 + p, .post-body h3 + p { margin-top: var(--space-4); }
.post-body ul, .post-body ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.post-body li { margin-bottom: var(--space-2); }
.post-body img { margin-block: var(--space-8); }
.post-body blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--blue-700);
  color: var(--muted);
}

/* ---- Contact page ---- */
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-facts { display: flex; flex-direction: column; }
.contact-fact { padding-block: var(--space-6); border-top: 1px solid var(--hairline); }
.contact-fact .section-label { margin-bottom: 0; }
.contact-fact p { margin: var(--space-2) 0 0; max-width: var(--measure-narrow); }
.contact-map iframe { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--hairline); display: block; }
.contact-qr-light { margin-top: var(--space-8); justify-self: start; text-align: left; }
.contact-qr-light .qr-card { border: 1px solid var(--hairline); }
.contact-qr-light figcaption { color: var(--muted); margin-inline: 0; } /* left-aligned variant: keep the width cap, drop the centring */

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .service-row,
  .post-item-link.has-cover { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-row-media,
  .post-item-media { order: -1; }
  .detail-grid, .contact-page-grid { grid-template-columns: 1fr; }
  .detail-media { position: static; }
  .other-services { grid-template-columns: 1fr; }
}