/* page styles — Task 1.3 */

/* ---- Front page: page-specific sections (Task 5.1) ---- */

/* "Det her løser vi" intro — sits above the services grid. */
.intro__inner{max-width:62ch;}
/* Optional very-subtle light texture (Task 8.2). section-atmosphere-2 is a light
   off-white texture held at low opacity behind the dark intro text so contrast
   stays AA. Activated only when front-page.php finds the file. */
.intro--has-bg{position:relative;background-color:var(--c-bg);}
.intro--has-bg::before{content:"";position:absolute;inset:0;background-image:var(--intro-bg);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.22;pointer-events:none;}
.intro--has-bg>.intro__inner{position:relative;z-index:1;}

/* Decorative teal→offwhite divider (Task 8.2, section-atmosphere-3). Thin
   full-width band bridging the dark stats section into the light one. */
.section-divider{line-height:0;}
.section-divider__img{display:block;width:100%;height:auto;max-height:120px;object-fit:cover;}
.intro__heading{font-size:var(--step-2);margin:0 0 var(--s-2);}
.intro__lead{margin:0;color:var(--c-ink-70);font-size:var(--step-1);line-height:1.5;}

/* Stats band — subtle tinted strip to set the numbers apart. */
.stats{background:var(--c-teal);color:var(--c-bg);}
.stats .stat__value{color:var(--c-bg);}
.stats .stat__label{color:var(--c-bg);opacity:.85;}

/* Bjarke intro — photo + bio, the human behind the results. */
.bjarke-intro__inner{display:grid;gap:var(--s-4);align-items:center;}
@media(min-width:760px){
  .bjarke-intro__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s-6);}
}
.bjarke-intro__img{border-radius:8px;}
.bjarke-intro__text{max-width:60ch;}
.bjarke-intro__heading{font-size:var(--step-2);margin:0 0 var(--s-2);}
.bjarke-intro__lead{margin:0 0 var(--s-3);color:var(--c-ink-70);line-height:1.6;}
.bjarke-intro__link{font-weight:600;}

/* ---- Service + method page templates (Task 5.2) ---- */

/* Page hero — generous top spacing, serif title, muted lead. */
.page-hero{padding-block:var(--s-12) var(--s-6);}
.page-hero__inner{max-width:64ch;}
.page-hero__title{font-size:var(--step-3);margin:0 0 var(--s-3);overflow-wrap:break-word;hyphens:auto;}
.page-hero__lead{margin:0;color:var(--c-ink-70);font-size:var(--step-1);line-height:1.5;}

/* Page content — editable prose (the_content). */
.page-content{padding-block:var(--s-6) var(--s-8);}
.page-content__inner{max-width:70ch;}
.page-content__inner > *{margin-block:0 var(--s-3);}
.page-content__inner > *:last-child{margin-bottom:0;}
.page-content__inner p{line-height:1.7;}
.page-content__inner h2{font-size:var(--step-2);margin-block:var(--s-6) var(--s-2);}
.page-content__inner h3{font-size:var(--step-1);margin-block:var(--s-4) var(--s-1);}
.page-content__inner > h2:first-child,
.page-content__inner > h3:first-child{margin-top:0;}
.page-content__inner a{color:var(--c-orange-action);font-weight:600;}
.page-content__inner a:hover{color:var(--c-ink);}
.page-content__inner ul,
.page-content__inner ol{margin-block:0 var(--s-3);padding-left:var(--s-3);}
.page-content__inner ul{list-style:none;padding-left:0;}
.page-content__inner ul li{position:relative;padding-left:var(--s-3);margin-bottom:var(--s-1);line-height:1.6;}
.page-content__inner ul li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--c-orange-action);}
.page-content__inner ol li{margin-bottom:var(--s-1);line-height:1.6;}
.page-content__inner blockquote{margin:var(--s-4) 0;padding-left:var(--s-3);border-left:3px solid var(--c-orange);color:var(--c-ink-70);font-style:italic;}

/* Method diagram — horizontal phase flow with an orange connector accent. */
.method-diagram{background:var(--c-teal);color:var(--c-bg);}
/* Optional generated atmosphere (Task 8.2). mood-architecture is dark; a teal
   scrim over it keeps the light diagram text comfortably AA. Activated only when
   tpl-method.php finds assets/img/generated/mood-architecture.* */
.method-diagram--has-bg{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--c-teal);}
.method-diagram--has-bg::before{content:"";position:absolute;inset:0;background:rgba(19,71,76,.82);pointer-events:none;}
.method-diagram--has-bg>.method-diagram__inner{position:relative;z-index:1;}
.method-diagram__heading{font-size:var(--step-2);margin:0 0 var(--s-6);color:var(--c-bg);}
.method-diagram__flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);}
@media(min-width:760px){
  .method-diagram__flow{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s-6);}
}
.method-phase{position:relative;padding:var(--s-3);border:1px solid var(--c-line);border-radius:8px;background:rgba(250,248,245,.06);}
/* Orange connector accent between phases (desktop: horizontal, mobile: vertical). */
.method-phase::after{content:"";position:absolute;background:var(--c-orange);}
.method-phase:last-child::after{display:none;}
@media(max-width:759px){
  .method-phase::after{left:var(--s-4);bottom:calc(-1 * var(--s-4) + 1px);width:2px;height:var(--s-4);}
}
@media(min-width:760px){
  .method-phase::after{top:50%;right:calc(-1 * var(--s-6) - 1px);transform:translateY(-50%);width:var(--s-6);height:2px;}
}
.method-phase__num{display:inline-block;font-family:var(--font-serif);font-weight:600;font-size:var(--step-1);color:var(--c-orange);margin-bottom:var(--s-1);}
.method-phase__name{font-size:var(--step-1);margin:0 0 var(--s-1);color:var(--c-bg);}
.method-phase__desc{margin:0;color:var(--c-bg);opacity:.88;line-height:1.55;font-size:var(--step--1);}

/* ---- Cases + Insights archive/single (Task 5.3) ---- */

/* Graceful empty state shared by both archives. */
.archive-empty{margin:0;color:var(--c-ink-70);font-size:var(--step-1);}

/* ---- Case grid (archive-case) ---- */
.case-grid{display:grid;gap:var(--s-4);}
@media(min-width:680px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);}
}
.case-card{display:flex;}
.case-card__link{
  display:flex;flex-direction:column;gap:var(--s-2);width:100%;
  padding:var(--s-4);border:1px solid var(--c-line);border-radius:8px;
  background:var(--c-bg);color:var(--c-ink);text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-card__link:hover,
.case-card__link:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  border-color:var(--c-orange);
}
.case-card__context{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-ink-70);font-weight:600;
}
.case-card__title{font-size:var(--step-2);margin:0;line-height:1.2;}
.case-card__snippet{margin:0;color:var(--c-ink-70);line-height:1.6;}
.case-card__metric{
  margin:var(--s-1) 0 0;display:flex;flex-direction:column;gap:.15em;
}
.case-card__metric-flow{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.4em;
  font-family:var(--font-serif);font-size:var(--step-2);font-weight:600;
  color:var(--c-orange-action);line-height:1.1;
}
.case-card__metric-arrow{color:var(--c-orange-action);}
.case-card__metric-unit{font-size:var(--step--1);color:var(--c-ink-70);font-weight:400;}
/* Outcome teaser for cases without a numeric metric — keeps every card
   showing a result, in the same accent voice as the metric. */
.case-card__result{
  margin:var(--s-1) 0 0;font-family:var(--font-serif);font-size:var(--step-1);
  font-weight:600;color:var(--c-orange-action);line-height:1.25;
}
.case-card__more{
  margin-top:auto;font-size:var(--step--1);font-weight:600;color:var(--c-orange-action);
}
.case-card__link:hover .case-card__more,
.case-card__link:focus-visible .case-card__more{color:var(--c-ink);}

/* ---- Single case ---- */
.case-single .page-hero{padding-block:var(--s-12) var(--s-4);}
.case-single .page-hero .case-card__context{display:block;margin-bottom:var(--s-2);}

/* Metric band — tinted strip echoing the front-page stats band. */
.case-metric-band{background:var(--c-teal);color:var(--c-bg);}
.case-metric-band .stat__value{color:var(--c-bg);}
.case-metric-band .stat__label{color:var(--c-bg);opacity:.85;}

.case-body{padding-block:var(--s-8);}
.case-body__inner{max-width:70ch;display:flex;flex-direction:column;gap:var(--s-6);}
.case-section{display:flex;flex-direction:column;gap:var(--s-2);}
.case-section__heading{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-orange-action);margin:0;font-weight:600;
}
.case-section__text{color:var(--c-ink);}
.case-section__text > *{margin:0 0 var(--s-2);line-height:1.7;}
.case-section__text > *:last-child{margin-bottom:0;}
.case-body__signature{display:flex;justify-content:center;margin-top:var(--s-2);}

/* ---- Insight list (archive-insight) ---- */
.insight-list{display:flex;flex-direction:column;gap:var(--s-5);max-width:72ch;}
.insight-card{
  display:grid;gap:var(--s-3);
  padding-bottom:var(--s-5);border-bottom:1px solid var(--c-line);
}
.insight-card:last-child{border-bottom:0;padding-bottom:0;}
@media(min-width:600px){
  .insight-card{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:var(--s-4);}
}
.insight-card__thumb{display:block;border-radius:8px;overflow:hidden;}
.insight-card__thumb img{display:block;width:100%;height:auto;border-radius:8px;
  transition:transform .25s ease;}
.insight-card__thumb:hover img{transform:scale(1.03);}
.insight-card__body{display:flex;flex-direction:column;gap:var(--s-1);}
.insight-card__date{font-size:var(--step--1);color:var(--c-ink-70);text-transform:uppercase;letter-spacing:.04em;}
.insight-card__title{font-size:var(--step-2);margin:0;line-height:1.25;}
.insight-card__title a{color:var(--c-ink);text-decoration:none;}
.insight-card__title a:hover,
.insight-card__title a:focus-visible{color:var(--c-orange-action);text-decoration:underline;}
.insight-card__excerpt{margin:0;color:var(--c-ink-70);line-height:1.6;}

.insight-empty{max-width:60ch;}
.insight-empty__heading{font-size:var(--step-2);margin:0 0 var(--s-2);color:var(--c-ink);}
.insight-empty__lead{margin:0;color:var(--c-ink-70);line-height:1.6;}

/* ---- Single insight ---- */
.insight-single__meta{margin:var(--s-2) 0 0;color:var(--c-ink-70);font-size:var(--step--1);display:flex;gap:.5em;flex-wrap:wrap;}
.insight-single__figure{margin:0;padding-block:var(--s-4) 0;}
.insight-single__figure img{display:block;width:100%;height:auto;border-radius:8px;}

/* ---- About / Contact / 404 (Task 5.4) ---- */

/* People — the two people behind Innomentor. */
.people__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6);}
@media(min-width:760px){
  .people__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);}
}
.person{display:flex;flex-direction:column;gap:var(--s-3);}
.person__photo{width:100%;}
/* Photo slot styling — keeps the layout intact before Task 8 wires real images. */
.person__photo img,
.person__photo-placeholder{
  display:block;width:100%;aspect-ratio:4/5;border-radius:8px;object-fit:cover;
}
/* Intentional portrait placeholder (no real photo yet): centered serif
   monogram on a subtle teal-tinted card + a small "Foto følger" caption.
   Matches the real portrait's aspect-ratio so the two person cards balance. */
.person__photo-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-2);
  background:color-mix(in srgb, var(--c-teal) 8%, var(--c-line));
  border:1px solid var(--c-line);
}
.person__monogram{
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(2.6rem,1.6rem+4vw,4rem);line-height:1;
  letter-spacing:.04em;color:var(--c-ink-70);
}
.person__photo-caption{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-ink-70);
}
.person__photo picture{display:block;width:100%;}

/* About-hero shared photo (Bjarke + Louise) — Task 8.1. */
.page-hero__img{display:block;width:100%;max-width:760px;height:auto;margin:var(--s-4) auto 0;border-radius:8px;}
.bjarke-intro picture{display:block;}
.person__body{max-width:54ch;}
.person__name{font-size:var(--step-2);margin:0 0 .15em;line-height:1.2;}
.person__role{
  margin:0 0 var(--s-2);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-ink-70);font-weight:600;
}
.person__bio{margin:0;color:var(--c-ink-70);line-height:1.7;}

/* Contact — two-column: form on the left, direct-contact aside on the right. */
.contact-layout{display:grid;gap:var(--s-6);align-items:start;}
@media(min-width:860px){
  .contact-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s-8);}
}
.contact-main{max-width:none;}

.contact-aside{
  padding:var(--s-5);border:1px solid var(--c-line);border-radius:8px;
  background:var(--c-bg);
}
.contact-aside__heading{font-size:var(--step-1);margin:0 0 var(--s-3);}
.contact-aside__name{margin:0 0 var(--s-3);font-weight:600;color:var(--c-ink);}
.contact-aside__list{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-direction:column;gap:var(--s-3);}
.contact-aside__item{display:flex;flex-direction:column;gap:.2em;}
.contact-aside__label{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;
  color:var(--c-ink-70);font-weight:600;
}
.contact-aside__value{color:var(--c-ink);font-style:normal;line-height:1.5;}
a.contact-aside__value,
.contact-aside__map{color:var(--c-orange-action-hover);font-weight:600;text-decoration:none;}
a.contact-aside__value:hover,
a.contact-aside__value:focus-visible,
.contact-aside__map:hover,
.contact-aside__map:focus-visible{color:var(--c-ink);text-decoration:underline;}
.contact-aside__map{display:inline-block;margin-top:var(--s-1);font-size:var(--step--1);}
.contact-aside__discretion{margin:0;color:var(--c-ink-70);line-height:1.6;font-size:var(--step--1);}

/* 404 — centered, generous spacing. */
.error-404{padding-block:var(--s-12);}
.error-404__inner{max-width:56ch;margin-inline:auto;text-align:center;}
.error-404__code{
  font-family:var(--font-serif);font-size:var(--step-3);font-weight:600;
  color:var(--c-orange);margin:0 0 var(--s-1);line-height:1;
}
.error-404__title{font-size:var(--step-3);margin:0 0 var(--s-3);}
.error-404__lead{margin:0 0 var(--s-5);color:var(--c-ink-70);font-size:var(--step-1);line-height:1.6;}
.error-404__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:center;}

@media(prefers-reduced-motion:reduce){
  .case-card__link,
  .insight-card__thumb img{transition:none;}
  .case-card__link:hover,
  .case-card__link:focus-visible{transform:none;}
  .insight-card__thumb:hover img{transform:none;}
}