/* Services group: services.html, personal-growth.html, project-study.html
   Page-layer additions on top of the Field Guide components (css/style.css).
   Tokens only; no raw colours, no url() other than the shared topo mask. */
@layer pages {

  /* =========================================================== T2 mastheads */
  .svc-masthead--personal .masthead__media > img { object-position: 45% 35%; }
  @media (min-width: 64em) {
    .svc-masthead--personal .masthead__media > img { object-position: 45% 55%; }
  }

  /* project-study: paper plate with a faint field-notebook grid under the contours */
  .svc-masthead--project .plate {
    --topo-size: 900px;
    background-color: var(--color-surface-2);
    background-image:
      linear-gradient(var(--color-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    padding: var(--space-6);
  }
  /* the plate is an index card for the three topics on the page, so it
     carries real content instead of reading as an empty placeholder */
  .svc-masthead--project .plate__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 600 var(--step--1)/1.3 var(--font-mono);
    letter-spacing: var(--tracking-mono);
    color: var(--color-text);
  }
  .svc-masthead--project .plate__topics span { color: var(--color-kicker); margin-right: var(--space-2); }
  .svc-masthead--project .plate__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }
  /* below 64em the plate is a short banner, not a 3:2 field that pushes the
     content down; the onpage list repeats the topics, so they hide there */
  @media (max-width: 63.99em) {
    .svc-masthead--project .masthead__media > .plate { aspect-ratio: auto; min-height: 9rem; padding: var(--space-4) var(--gutter); }
    .svc-masthead--project .plate__num { font-size: clamp(3rem, 14vw, 5rem); }
  }
  @media (max-width: 39.99em) {
    .svc-masthead--project .plate__topics { display: none; }
  }
  @media (min-width: 64em) {
    .svc-masthead--project .plate { padding: var(--space-7); }
  }

  /* 國安教育.jpg is a 720px source: never render it wider than that */
  .checkpoint__media--small { max-width: 720px; width: 100%; aspect-ratio: 16 / 9; }
  .checkpoint__media--small img { object-position: 50% 50%; }

  /* =========================================================== services catalogue */
  /* the filter bar sticks only while the catalogue is on screen
     (.filter-scope in style.css); panels start below it */
  .catalogue__panels { padding-top: var(--space-7); }
  @media (min-width: 64em) {
    .catalogue__panels { padding-top: var(--space-8); }
  }

  /* #panel-all route groups: links sit opposite the title from 64em */
  .catalogue .route-head { margin-top: var(--space-9); }
  .catalogue .section-head + .route-head { margin-top: var(--space-7); }
  .catalogue .route-head__title { flex: 1 1 auto; min-width: 0; }
  @media (min-width: 64em) {
    .catalogue .route-head { flex-wrap: nowrap; }
    .catalogue .route-head__links { flex-basis: auto; justify-content: flex-end; gap: 0 var(--space-5); }
  }

  /* category panel head: route line, title, lede, then links to detail pages */
  .panel-head > .route-line { margin-bottom: var(--space-3); }
  .panel-head__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
    margin-top: var(--space-3);
  }

  /* catalogue cards: a lead card fills the row gap so no grid ends with a hole.
     2 columns (40-80em): an odd-sized group opens with a full-width lead.
     3 columns (80em+): a group of 3n+2 opens with a two-column lead. */
  .catalogue .card__body h3 { font-size: var(--step-1); }
  @media (min-width: 40em) and (max-width: 79.99em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  @media (min-width: 80em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) {
      grid-column: span 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  .catalogue .card-grid > .card { min-width: 0; }
  /* logos are centred, never cropped like the square photos */
  .card__media--logo img, .checkpoint__media--logo img { object-position: 50% 50%; }
  /* lead-card internals: photo fills the left half, body centred on the right */
  @media (min-width: 40em) and (max-width: 79.99em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) .card__media { position: relative; aspect-ratio: auto; min-height: 18rem; }
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) .card__media img { position: absolute; inset: 0; }
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) .card__body { padding: var(--space-6); justify-content: center; }
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) h3 { font: 700 var(--step-2)/1.25 var(--font-display); }
  }
  @media (min-width: 80em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) .card__media { position: relative; aspect-ratio: auto; min-height: 18rem; }
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) .card__media img { position: absolute; inset: 0; }
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) .card__body { padding: var(--space-6); justify-content: center; }
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) h3 { font: 700 var(--step-2)/1.25 var(--font-display); }
  }

  /* custom-theme card: a field plate instead of repeating the tug-of-war
     photo used by the 團隊建立活動 card in the same group */
  .card__media.svc-custom-plate {
    aspect-ratio: 3 / 2;
    border-radius: 0;
    padding: var(--space-5);
  }
  .svc-custom-plate .plate__num {
    font: 700 clamp(3rem, 6vw, 5rem)/1 var(--font-display);
    letter-spacing: var(--tracking-cjk);
  }
  @media (min-width: 80em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(3n+2) .svc-custom-plate { aspect-ratio: auto; }
  }
  @media (min-width: 40em) and (max-width: 79.99em) {
    .catalogue .card-grid > .card:first-child:nth-last-child(odd) .svc-custom-plate { aspect-ratio: auto; }
  }

  /* =========================================================== logo plates, dark
     The 性格透視 logo is a white-ground JPEG. On the dark theme a full-bleed
     white panel is the brightest thing on the page, so the slot turns to the
     surface tone and the logo sits inset as a framed specimen, slightly
     dimmed. Light theme keeps the white --color-plate. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.card__media--logo, .checkpoint__media--logo) { background: var(--color-surface-2); }
    :root:not([data-theme="light"]) :is(.card__media--logo, .checkpoint__media--logo) img {
      padding: var(--space-6);
      background: transparent;
      filter: brightness(.86);
    }
  }
  :root[data-theme="dark"] :is(.card__media--logo, .checkpoint__media--logo) { background: var(--color-surface-2); }
  :root[data-theme="dark"] :is(.card__media--logo, .checkpoint__media--logo) img {
    padding: var(--space-6);
    background: transparent;
    filter: brightness(.86);
  }

  /* =========================================================== FAQ */
  .faq .split-head__body { max-width: 48rem; }
}