/* The page's layout and components, on the brand's tokens and base styles.
   No colour is spelled here: every one comes from assets/brand/prisma-tokens.css.
   Greek text never goes under 16px (BRAND.md section 3). The 11px label is for Latin only. */

:root { --pc-gutter: var(--p-space-4); --pc-grid: 1180px; }
@media (min-width: 720px) { :root { --pc-gutter: var(--p-space-6); } }

html { scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { margin: 0; }
p { margin: 0 0 var(--p-space-4); }

.pc-main { margin: 0; }

.pc-hero,
.pc-section,
hr.refraction {
  width: min(var(--pc-grid), 100% - 2 * var(--pc-gutter));
  margin-inline: auto;
}

.pc-icon { flex: none; width: 24px; height: 24px; color: var(--c-icon); stroke-width: 2; }

/* The glass pill: the book's one glass element, 12px blur, at grid width. */
.pc-header {
  position: sticky;
  top: var(--p-space-3);
  z-index: 10;
  width: min(var(--pc-grid), 100% - 2 * var(--pc-gutter));
  margin: var(--p-space-3) auto 0;
}
.pc-header__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  padding: var(--p-space-2) var(--p-space-2) var(--p-space-2) var(--p-space-5);
  background: color-mix(in srgb, var(--c-bg-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(var(--pill-blur));
  backdrop-filter: blur(var(--pill-blur));
  border: 1px solid var(--c-border);
  border-radius: var(--pill-radius);
  box-shadow: var(--p-shadow-float);
}
.pc-header__name {
  min-width: 0;
  color: var(--c-text);
  font-weight: var(--p-weight-bold);
  text-decoration: none;
}
.pc-header__name { display: inline-flex; align-items: center; gap: var(--p-space-3); }
.pc-logo-slot {
  display: none;
  padding: 0 var(--p-space-3);
  color: var(--c-text-muted);
  font-weight: var(--p-weight-regular);
  border: 1px dashed var(--c-text-muted);
  border-radius: var(--field-radius);
}
@media (min-width: 720px) { .pc-logo-slot { display: inline-block; } }
.pc-header__logo { display: block; width: auto; max-width: 11rem; height: 2.5rem; object-fit: contain; }
.pc-header nav { display: flex; flex: none; align-items: center; gap: var(--p-space-2); }
.pc-header__link {
  display: none;
  padding: var(--p-space-2) var(--p-space-3);
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--pill-radius);
  transition: color var(--p-motion-fast) ease;
}
.pc-header__link:hover { color: var(--c-link); }
@media (min-width: 720px) { .pc-header__link { display: inline-block; } }
.pc-header__cta { padding: var(--p-space-3) var(--p-space-4); border-radius: var(--pill-radius); }

/* The primary action is ink on paper, never a gradient. .btn is in the base styles. */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}

/* Hero */
.pc-hero {
  display: grid;
  gap: var(--p-space-6);
  align-items: center;
  padding-block: var(--p-space-6);
}
.pc-hero .display { margin: 0 0 var(--p-space-5); overflow-wrap: break-word; }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-3) var(--p-space-5); margin-top: var(--p-space-5); }
.pc-more { margin: 0; }
@media (min-width: 900px) {
  .pc-hero { grid-template-columns: 7fr 5fr; gap: var(--p-space-7); padding-block: var(--p-space-7); }
  .pc-hero .pc-slot, .pc-hero .pc-photo { aspect-ratio: 1 / 1; }
}

/* Sections */
.pc-section { padding-block: var(--p-space-6); }
@media (min-width: 900px) { .pc-section { padding-block: var(--p-space-7); } }
.pc-section h2 { font-size: var(--p-size-h1); line-height: var(--p-leading-h1); letter-spacing: var(--p-track-h1); }
.pc-section h3 { font-size: var(--p-size-h2); line-height: var(--p-leading-h2); letter-spacing: var(--p-track-h2); margin: var(--p-space-5) 0 var(--p-space-2); }

.pc-about { display: grid; gap: var(--p-space-6); align-items: center; }
.pc-about__text { max-width: 720px; }
.pc-about .pc-photo { aspect-ratio: 4 / 3; }
.pc-about p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .pc-about { grid-template-columns: 5fr 7fr; gap: var(--p-space-7); }
  .pc-about__text { order: 1; }
}

.pc-services { display: grid; gap: var(--p-space-4); margin-top: var(--p-space-5); }
@media (min-width: 720px) { .pc-services { grid-template-columns: repeat(3, 1fr); } }
.pc-service { padding: var(--p-space-4); }
.pc-service p:last-child { margin-bottom: 0; }
.pc-service .pc-slot { margin: 0; min-height: 13rem; }

/* A place for something still to be supplied, with what belongs there written on it. */
.pc-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--p-space-3);
  min-height: 16rem;
  margin: 0;
  padding: var(--p-space-5);
  background: var(--c-bg-raised);
  border: 1px dashed var(--c-text-muted);
  border-radius: var(--card-radius);
}
.pc-slot figcaption { display: grid; gap: var(--p-space-1); }
.pc-slot strong { font-weight: var(--p-weight-semi); }
.pc-slot span { color: var(--c-text-muted); }
.pc-slot--text { min-height: 0; margin-top: var(--p-space-5); }

/* A chosen photo. */
.pc-photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--card-radius); }
.pc-service .pc-photo { aspect-ratio: 4 / 3; }

/* The register extract */
/* The hairlines are the list's ground showing through a 1px gap, so that two columns need no
   special edges. A short value shares its row, and a long one takes the whole row. */
.pc-details {
  display: grid;
  gap: 1px;
  margin: var(--p-space-5) 0 0;
  overflow: hidden;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
}
.pc-details > div { display: grid; gap: var(--p-space-1); padding: var(--p-space-3) var(--p-space-5); background: var(--card-bg); }
.pc-details dt { color: var(--c-text-muted); }
.pc-details dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .pc-details > div { grid-template-columns: 11rem 1fr; gap: var(--p-space-5); } }
@media (min-width: 900px) {
  .pc-details { grid-template-columns: 1fr 1fr; }
  .pc-details__wide { grid-column: 1 / -1; }
}
.pc-data { font-family: var(--p-font-mono); }
.pc-source { margin: var(--p-space-4) 0 0; color: var(--c-text-muted); }

/* Refraction: one per surface, above the final call to action. .refraction is in the base styles. */
hr.refraction { margin-block: 0; }

/* Contact */
.pc-contact-section { display: grid; gap: var(--p-space-6); align-items: start; }
@media (min-width: 900px) { .pc-contact-section { grid-template-columns: 5fr 7fr; gap: var(--p-space-7); } }
.pc-contact-section .pc-slot { margin-top: var(--p-space-5); min-height: 13rem; }
/* The contact box: the company's logo by default, or a map. */
.pc-contact-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  margin-top: var(--p-space-5);
  padding: var(--p-space-6);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
}
.pc-contact-box__logo { display: block; width: auto; max-width: 70%; max-height: 8rem; height: auto; }
.pc-contact-box--map { padding: 0; }
.pc-contact-box--map iframe { display: block; width: 100%; height: 20rem; border: 0; }
.pc-contact { display: grid; gap: var(--p-space-3); margin: var(--p-space-4) 0 0; padding: 0; list-style: none; }
.pc-contact li { display: flex; gap: var(--p-space-3); align-items: flex-start; overflow-wrap: anywhere; }

/* Form */
.pc-form { display: grid; gap: var(--p-space-4); padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--c-border); border-radius: var(--card-radius); }
.pc-form__row { display: grid; gap: var(--p-space-4); }
@media (min-width: 720px) { .pc-form__row { grid-template-columns: 1fr 1fr; } }
.pc-form__field { display: grid; gap: var(--p-space-2); }
.pc-form label { font-weight: var(--p-weight-semi); }
.pc-form__optional { color: var(--c-text-muted); font-weight: var(--p-weight-regular); }
.pc-form input,
.pc-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--p-space-3);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-text-muted);
  border-radius: var(--field-radius);
  font: inherit;
}
.pc-form [aria-invalid="true"] { border-width: 2px; border-color: var(--c-text); }
.pc-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pc-form__fine { margin: var(--p-space-3) 0 0; color: var(--c-text-muted); }
.pc-note { margin: 0 0 var(--p-space-4); padding: var(--p-space-3) var(--p-space-4); background: var(--c-bg-raised); border: 2px solid var(--c-text); border-radius: var(--field-radius); }

/* Footer: the dark theme's ground, through the tokens' .on-ink. */
.pc-footer { padding-block: var(--p-space-7) var(--p-space-5); background: var(--c-bg); color: var(--c-text); }
.pc-footer__inner { width: min(var(--pc-grid), 100% - 2 * var(--pc-gutter)); margin-inline: auto; }
.pc-footer__grid { display: grid; gap: var(--p-space-6); }
@media (min-width: 900px) { .pc-footer__grid { grid-template-columns: 4fr 5fr 3fr; } }
.pc-footer__name { margin: 0; font-size: var(--p-size-h2); font-weight: var(--p-weight-bold); line-height: var(--p-leading-h2); }
.pc-footer a { color: var(--c-link); }
.pc-footer .pc-contact { margin: 0; }
.pc-footer__legal { display: grid; gap: var(--p-space-3); margin: 0; }
.pc-footer__legal dt { color: var(--c-text-muted); }
.pc-footer__legal dd { margin: 0; }
.pc-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-4);
  margin-top: var(--p-space-6);
  padding-top: var(--p-space-5);
  border-top: 1px solid var(--c-border);
}
.pc-footer__base p { margin: 0; color: var(--c-text-muted); }

/* Made by: the Latin label beside the lockup, at the book's minimum width. Clear space is half
   the mark's height on every side. */
.pc-madeby { display: inline-flex; align-items: center; gap: var(--p-space-4); padding: var(--p-space-2); text-decoration: none; }
.pc-madeby img { display: block; width: 92px; height: auto; }
.pc-footer .pc-madeby .label { color: var(--c-text-muted); }

/* Cookie banner: floating, so it may cast the floating shadow. Accept and reject are the same size. */
.pc-consent {
  position: fixed;
  right: var(--pc-gutter);
  bottom: var(--pc-gutter);
  z-index: 20;
  box-sizing: border-box;
  width: min(32rem, 100% - 2 * var(--pc-gutter));
  padding: var(--p-space-5);
  background: var(--card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  box-shadow: var(--p-shadow-float);
}
.pc-consent[hidden] { display: none; }
.pc-consent p { margin: 0 0 var(--p-space-4); }
.pc-consent__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-3); }
.pc-consent__actions .btn { flex: 1 1 8rem; border: 1px solid var(--c-action); }
.pc-consent__reject.btn { background: transparent; color: var(--c-text); }
.pc-cookie-link { padding: 0; color: var(--c-link); background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }

/* With placeholders hidden and no photo chosen, the text takes the whole row. */
.pc-hero.pc-hero--single, .pc-about.pc-about--single { grid-template-columns: minmax(0, 1fr); }
.pc-service h3:first-child { margin-top: 0; }

/* The header with a logo, a name, both or neither. On a phone the name gives way first. */
.pc-header nav { margin-left: auto; }
.pc-header__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 719px) { .pc-header__logo { max-width: 6rem; height: 2rem; } }