/*
  Guild-site components and sections (the 2026-10-01 About design language).
  Figma: page "12 · Screens — Native", frames "/about · Dark" (110:7149) and "/about · Light" (112:7521);
  components on page "03 · Components", section "Guild site".

  Photo sections and photo cards are fixed dark in both themes (overlay/scrim + on-image tokens);
  plain sections follow the theme.
*/

.g-section {
  position: relative;
  background: var(--aw-bg-primary);
  border-top: 1px solid var(--aw-border-gold);
}
.g-section.on-image {
  background: var(--aw-overlay-scrim);
  color: var(--aw-text-on-image);
}

/* ---------- Section title (105:43) ---------- */
.section-title { display: flex; flex-direction: column; gap: var(--aw-space-6); }
.section-title__heading { display: flex; flex-direction: column; gap: var(--aw-space-2); }
.section-title__title { color: var(--aw-text-primary); }
.section-title__sub { color: var(--aw-accent-gold); }
.section-title__body { color: var(--aw-text-secondary); }
.on-image .section-title__title, .on-image .section-title__body { color: var(--aw-text-on-image); }
.on-image .section-title__sub { color: var(--aw-accent-on-image); }

/* ---------- Medallion (104:76) ---------- */
.medallion {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--aw-accent-on-image);
}
.medallion--plain  { width: 34px; height: 34px; }
.medallion--plain .icon { width: 30px; height: 30px; }
.medallion--ring-s {
  width: 36px; height: 36px;
  background: var(--aw-overlay-scrim);
  border: 1.25px solid var(--aw-accent-on-image);
  border-radius: var(--aw-radius-full);
}
.medallion--ring-s .icon { width: 18px; height: 18px; }
.medallion--ring-l {
  width: 72px; height: 72px;
  background: var(--aw-overlay-scrim);
  border: 1.5px solid var(--aw-accent-on-image);
  border-radius: var(--aw-radius-full);
}
.medallion--ring-l .icon { width: 30px; height: 30px; }
.medallion--hex { width: 42px; height: 42px; position: relative; }
.medallion--hex > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.medallion--hex .hex-shape { fill: var(--aw-overlay-scrim); stroke: var(--aw-accent-on-image); stroke-width: 1.25; }
.medallion--hex .icon { position: relative; width: 17px; height: 17px; }

/* ---------- Photo cards (Card / Council, Agent, Human wizard, Open position) ---------- */
.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--aw-overlay-scrim);
  border: 1px solid var(--aw-accent-on-image);
  border-radius: var(--aw-radius-sm);
  color: var(--aw-text-on-image);
  isolation: isolate;
}
.photo-card__img {
  position: absolute;
  inset: -1px -1px auto;
  width: calc(100% + 2px);
  height: 214px;
  object-fit: cover;
  z-index: -2;
}
.photo-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--aw-overlay-card-bottom);
  z-index: -1;
}
a.photo-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.photo-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }

/* Card / Council (106:55) */
.card-council { height: 323px; }
.card-council__body { display: flex; flex-direction: column; gap: var(--aw-space-3); padding: var(--aw-space-4) var(--aw-space-5); }
.card-council__name-row { display: flex; align-items: center; gap: var(--aw-space-3); }
.card-council__name { display: flex; flex-direction: column; gap: var(--aw-space-1); }
.card-council__role { color: var(--aw-accent-on-image); }
.card-council__bio-row { display: flex; align-items: flex-end; gap: var(--aw-space-3); }
.card-council__bio { flex: 1 1 0; }
.action-ring {
  width: 28px; height: 28px;
  display: grid; place-items: center; flex: none;
  border: 1.25px solid var(--aw-accent-on-image);
  border-radius: var(--aw-radius-full);
  color: var(--aw-accent-on-image);
}
.action-ring .icon { width: 14px; height: 14px; }

/* Card / Agent (106:72) */
.card-agent { height: 311px; }
.card-agent__body {
  display: flex; flex-direction: column; align-items: center; gap: var(--aw-space-2);
  padding: var(--aw-space-3) var(--aw-space-2) var(--aw-space-4);
  text-align: center;
}

/* Card / Human wizard (106:82) and Card / Open position (106:88) */
.card-human, .card-open { height: 209px; flex: none; }
.card-human { width: 152px; }
.card-open { width: 128px; }
.card-human .photo-card__img, .card-open .photo-card__img { height: 160px; }
.card-human__body { display: flex; flex-direction: column; gap: var(--aw-space-1); padding: var(--aw-space-3) var(--aw-space-2); }
.card-open__body { display: flex; flex-direction: column; align-items: center; gap: var(--aw-space-1); padding: var(--aw-space-3) var(--aw-space-2); text-align: center; }
.card-open__label { color: var(--aw-accent-on-image); }

/* ---------- Row / Guild layer (107:60) ---------- */
.guild-layer { display: flex; align-items: center; gap: var(--aw-space-4); min-height: 50px; }
.guild-layer__connector { position: relative; width: 58px; height: 6px; flex: none; color: var(--aw-accent-on-image); }
.guild-layer__connector::before { content: ""; position: absolute; left: 0; top: 2.5px; width: 52px; height: 1px; background: currentColor; }
.guild-layer__connector::after { content: ""; position: absolute; right: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.guild-layer__num { width: 64px; flex: none; }
.guild-layer__text { display: flex; flex-direction: column; gap: var(--aw-space-1); flex: 1 1 0; min-width: 0; }

/* ---------- Item / Ecosystem (107:73) ---------- */
.eco-item { display: flex; flex-direction: column; align-items: center; gap: var(--aw-space-3); width: 150px; text-align: center; color: var(--aw-text-on-image); }

/* ---------- Band / Tagline (107:79) ---------- */
.band-tagline {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--aw-space-2);
  padding: var(--aw-space-4) var(--aw-gutter) var(--aw-space-3);
  min-height: 80px;
  background: var(--aw-overlay-scrim);
  border-top: 1px solid var(--aw-accent-on-image);
  color: var(--aw-text-on-image);
  text-align: center;
}
.band-tagline .ornament { width: 440px; max-width: 100%; }

/* Horizontal card rail used for wide card rows on narrow screens */
.rail { display: flex; gap: var(--aw-space-4); }

/* =====================================================================
   About page sections
   ===================================================================== */

/* Hero (incl. motto) — 396px below the header at 1536 */
.about-hero { position: relative; overflow: hidden; background: var(--aw-overlay-scrim); color: var(--aw-text-on-image); }
.about-hero > .wrap { position: relative; min-height: 396px; }
.about-hero__art {
  position: absolute;
  top: 0; bottom: 0;
  right: 11.46%;           /* 176 / 1536 */
  width: 42.19%;           /* 648 / 1536 */
}
.about-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__art::after { content: ""; position: absolute; inset: 0; background: var(--aw-overlay-fade-x); }
.about-hero__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--aw-space-8);
  padding-block: var(--aw-space-14) var(--aw-space-4);
}
.about-hero__copy { display: flex; flex-direction: column; gap: var(--aw-space-6); width: 720px; max-width: 100%; }
.about-hero__titles { display: flex; flex-direction: column; gap: var(--aw-space-3); }
.about-hero__titles h1 span { display: block; }
.about-hero__lead { max-width: 400px; }
.about-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aw-space-6) var(--aw-space-8); }
.about-hero__motto { display: flex; flex-direction: column; gap: var(--aw-space-4); width: 140px; flex: none; padding-top: var(--aw-space-6); }
.about-hero__motto span { display: block; }

/* The High Council */
.about-council > .wrap { display: flex; align-items: flex-start; gap: var(--aw-space-6); padding-block: var(--aw-space-4) var(--aw-space-8); }
.about-council__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aw-space-8); width: 500px; flex: none; padding-top: var(--aw-space-4); }
.about-council__cards { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aw-space-4); }

/* The Arch Wizards */
.about-agents > .wrap { display: flex; flex-direction: column; gap: var(--aw-space-4); padding-block: var(--aw-space-4) var(--aw-space-5); }
.about-agents__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aw-space-6); }
.about-agents__cards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--aw-space-4); }

/* A Multi-Layered Guild */
.about-guild { overflow: hidden; }
.about-guild__art { position: absolute; top: 0; bottom: 0; left: 33.2%; width: 33.4%; }  /* 510 / 1536, 513 / 1536 */
.about-guild__art img { width: 100%; height: 100%; object-fit: cover; }
.about-guild__art::after { content: ""; position: absolute; inset: 0; background: var(--aw-overlay-fade-x); }
.about-guild > .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--aw-space-8); padding-block: 6px; min-height: 310px; }  /* Figma: 298px of layers centred in a 311px band */
.about-guild__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aw-space-8); width: 470px; flex: none; }
.about-guild__layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aw-space-3); width: 540px; flex: none; }

/* Human Wizards & Open Positions */
.about-people > .wrap { display: flex; align-items: flex-start; gap: var(--aw-space-10); padding-block: var(--aw-space-4) var(--aw-space-6); }
.about-people__main { display: flex; flex-direction: column; gap: var(--aw-space-4); flex: 1 1 0; min-width: 0; }
.about-people__join { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aw-space-4); width: 312px; flex: none; }
.about-people__join .ornament { width: 100%; }

/* The Citadel Ecosystem + tagline band */
.about-eco { overflow: hidden; }
.about-eco__bg { position: absolute; inset: 0; z-index: 0; }
.about-eco__bg img { width: 100%; height: 100%; object-fit: cover; }
.about-eco__bg::after { content: ""; position: absolute; inset: 0; background: var(--aw-overlay-band); }
.about-eco > .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--aw-space-8); min-height: 297px; padding-block: var(--aw-space-5) var(--aw-space-6); }
.about-eco__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aw-space-6); width: 470px; flex: none; }
.about-eco__items { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; flex: 1 1 0; max-width: 920px; margin-left: auto; }
.about-eco__items::before {
  content: "";
  position: absolute;
  left: 80px; right: 80px; top: 36px;
  border-top: 1px dashed var(--aw-accent-on-image);
  border-image: repeating-linear-gradient(90deg, var(--aw-accent-on-image) 0 2px, transparent 2px 7px) 1;
}
.about-eco__items li { position: relative; }
.about-eco .band-tagline { position: relative; z-index: 1; }

/* ---------- Responsive (no mobile design exists in Figma yet: restructured, not scaled) ---------- */

@media (max-width: 1439px) {
  .about-people > .wrap { flex-direction: column; align-items: stretch; }
  .about-people__main { flex: none; width: 100%; }
  .about-people__join { width: 100%; max-width: 560px; }
  .about-people .rail { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--aw-space-2); }
  .about-people .rail > * { scroll-snap-align: start; }
  .about-eco__items .eco-item { width: 128px; }
}

@media (max-width: 1279px) {
  .about-council__copy, .about-guild__copy, .about-eco__copy { max-width: 100%; }
  .about-council > .wrap { flex-direction: column; }
  .about-council__copy { width: 100%; max-width: 720px; }
  .about-council__cards { flex: none; width: 100%; }
  .about-agents__cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--aw-space-2);
  }
  .about-agents__cards > * { flex: 0 0 152px; scroll-snap-align: start; }
  .about-guild > .wrap { flex-direction: column; align-items: stretch; padding-block: var(--aw-space-10); }
  .about-guild__copy { width: 100%; max-width: 640px; }
  .about-guild__art { position: relative; left: auto; width: 100%; height: 260px; }
  .about-guild__art::after { background: var(--aw-overlay-fade-y); }
  .about-guild { display: flex; flex-direction: column-reverse; }
  .about-guild__layers { width: 100%; max-width: 640px; }
  .about-eco > .wrap { flex-direction: column; align-items: flex-start; padding-block: var(--aw-space-10); }
  .about-eco__items { width: 100%; max-width: none; margin-left: 0; }
}

@media (max-width: 1279px) {
  .about-hero__art { right: 0; width: 62%; }
  .about-hero__art::after { background: linear-gradient(90deg, var(--aw-overlay-scrim) 0%, rgba(7, 21, 34, 0.55) 35%, rgba(7, 21, 34, 0.15) 100%); }
  .about-hero__row { flex-direction: column; padding-block: var(--aw-space-12) var(--aw-space-10); }
  .about-hero__motto { width: auto; padding-top: 0; }
  .about-hero__motto .ornament { width: 140px; }
}

@media (max-width: 1023px) {
  .about-hero__art { width: 100%; opacity: 0.55; }
  .about-hero__art::after { background: linear-gradient(90deg, var(--aw-overlay-scrim) 0%, rgba(7, 21, 34, 0.85) 45%, rgba(7, 21, 34, 0.35) 100%), linear-gradient(0deg, var(--aw-overlay-scrim) 0%, rgba(7, 21, 34, 0) 40%); }
  .about-agents__head { flex-direction: column; align-items: flex-start; }
  .about-eco__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aw-space-8) var(--aw-space-4); justify-items: center; }
  .about-eco__items::before { display: none; }
  .about-council > .wrap, .about-agents > .wrap, .about-people > .wrap { padding-block: var(--aw-space-10); }
}

@media (max-width: 767px) {
  .about-council__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--aw-space-2); }
  .about-council__cards > * { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; }
}

@media (max-width: 639px) {
  .about-hero__lead { max-width: none; }
  .about-eco__items { grid-template-columns: repeat(2, 1fr); }
  .guild-layer { gap: var(--aw-space-3); }
  .guild-layer__connector { display: none; }
  .guild-layer__num { width: 52px; }
  .band-tagline .ornament { width: 240px; }
}