/* ==========================================================================
   Bilfoto 2026 – komponenter for undersider
   ========================================================================== */

/* --- Underside-hero: tittel øverst, intro nederst (XD: annonsefoto) ----- */

.hero--page { --scrim-top: .74; --scrim-mid: .2; --scrim-bottom: .9; }  /* tittelen ligger øverst */

/* Gradientstyrke – tilsvarer valgene i ACF-feltet «Gradientstyrke».
   Ligger etter .hero--page slik at valget alltid overstyrer standarden. */
.hero.hero--scrim-light  { --scrim-top: .34; --scrim-mid: .08; --scrim-bottom: .6; }
.hero.hero--scrim-strong { --scrim-top: .86; --scrim-mid: .34; --scrim-bottom: .95; }
.hero.hero--scrim-max    { --scrim-top: .94; --scrim-mid: .5;  --scrim-bottom: .97; }
.hero--page {
  align-items: stretch;
  grid-template-rows: auto 1fr auto;
  /* XD: tekstens overkant ligger ca. 32 px under headeren, baseline på y228 */
  padding-block: clamp(5.5rem, 7.8vw, 9.4rem) 0;
}
/* XD: sidetittelen er sentrert på siden (x678 + ca. 560 px tekst => senter 958) */
.hero--page .hero__title {
  font-size: var(--fs-page-h1);
  line-height: 1.05;
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
}
.hero--page .hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md);
  padding-block-end: clamp(3rem, 5.2vw, 6.25rem);
}
.hero--page .hero__intro {
  font-size: var(--fs-lead);
  line-height: 1.35;
  max-width: 52ch;
}
.hero--page .hero__eyebrow { margin-block-end: var(--space-sm); }
.hero--short { height: min(74svh, max(46vw, 62svh)); }

/* Mobil: «kort»-heroen (Hvem er vi) har tittel, avsnitt OG pille. Det er for
   mye tekst til å ligge oppå bildet på en telefon – på 390 px ble de siste
   linjene klippet av heroens faste høyde. Bildet legges derfor ut i flyten
   øverst og innholdet under, på den sorte flaten (kundens korrektur
   26.08.2026). Fra 701 px og opp ligger alt som før, oppå bildet. */
@media (max-width: 700px) {
  .hero--kort {
    height: auto;
    display: block;
    padding-block: 0 var(--space-md);
  }
  .hero--kort .hero__slides {
    position: relative; inset: auto; z-index: auto;
    aspect-ratio: 4 / 3;
  }
  /* Gradienten fantes for å gjøre teksten lesbar OVER bildet. Nå ligger
     teksten under, og bildet skal stå ubeskåret av mørke. */
  .hero--kort .hero__overlay { display: none; }
  /* .hero--page .hero__foot legger pillen ved siden av teksten. På en telefon
     blir den da klemt til tre linjer; den legges under i stedet. */
  .hero--kort .hero__foot {
    /* space-sm er 20 px på en telefon, og det er for tett under bildet mot en
       så stor overskrift (kundens korrektur 26.08.2026). */
    padding-block: var(--space-md) 0;
    flex-direction: column; align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* Kontakt-hero uten bilde */
.hero--plain { height: auto; padding-block: clamp(8rem, 12vw, 15rem) var(--space-lg); }
.hero--plain .hero__overlay, .hero--plain .hero__slides { display: none; }

/* --- Produktblokker (mosaikk fra XD) ------------------------------------ */

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: start;
}
.products__col { display: grid; gap: var(--space-sm); }

.product { position: relative; display: block; overflow: hidden; isolation: isolate; }
.product--tall  { aspect-ratio: 915 / 682; }
.product--mid   { aspect-ratio: 915 / 479; }
.product--short { aspect-ratio: 915 / 260; }
.product img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.product:hover img, .product:focus-visible img { transform: scale(1.05); }
.product__overlay { position: absolute; inset: 0; background: var(--bf-overlay-card); }
.product__body {
  position: absolute; inset-block-start: 0; inset-inline: 0;   /* XD: øverst i blokken */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: clamp(1rem, 1.35vw, 1.625rem);
}
.product__title { font-size: var(--fs-card); line-height: var(--lh-snug); }
@media (max-width: 800px) {
  .products { grid-template-columns: 1fr; }
  .product--tall, .product--mid, .product--short { aspect-ratio: 16 / 10; }
}

/* --- Galleri (mosaikk) + lightbox -------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 4), minmax(0, 1fr));   /* WP setter 3 når det fyller bedre */
  grid-auto-rows: clamp(120px, 10.7vw, 206px);
  grid-auto-flow: row dense;
  gap: var(--space-xs);
}
.gallery__item {
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 1; grid-row: span 2;
}
.gallery__item--tall  { grid-row: span 4; }
.gallery__item--wide  { grid-column: span 2; grid-row: span 2; }
.gallery__item--stor  { grid-column: span 2; grid-row: span 4; }
/* WordPress pakker flisene i PHP (bf_mosaikk_pakk) og sender plasseringen som
   --ga. Uten variabelen (prototypen) gjelder spennene over og dense-flyten. */
.gallery__item { grid-area: var(--ga, auto); }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); opacity: .85; }
.gallery__item::after {                    /* expand-ikon som i XD */
  content: ""; position: absolute; inset-block-end: .75rem; inset-inline-end: .75rem;
  width: clamp(20px, 1.4vw, 26px); aspect-ratio: 1; opacity: .5;
  background: currentColor;
  -webkit-mask: var(--icon-expand) center / contain no-repeat;
          mask: var(--icon-expand) center / contain no-repeat;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gallery__item:hover::after { opacity: 1; }
:root {
  --icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 4h7v2H6v5H4V4zm16 0v7h-2V6h-5V4h7zM4 13h2v5h5v2H4v-7zm16 0v7h-7v-2h5v-5h2z'/%3E%3C/svg%3E");
}
@media (max-width: 700px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
  .gallery__item, .gallery__item--tall, .gallery__item--wide,
  .gallery__item--stor { grid-column: span 1; grid-row: span 1; }
}

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; place-items: center;
  background: rgba(9, 9, 9, .96);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(94vw, 1600px); max-height: 86svh; }
.lightbox__figure img { max-height: 86svh; width: auto; margin-inline: auto; object-fit: contain; }
.lightbox__bar {
  position: absolute; inset-block-end: clamp(1rem, 2vw, 2rem); inset-inline: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-size: var(--fs-ui); color: var(--bf-text-muted);
}
.lightbox__btn {
  width: clamp(40px, 2.9vw, 52px); aspect-ratio: 1;
  border: 1px solid var(--bf-hairline); display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background: var(--bf-gold); color: var(--bf-black); }
.lightbox__btn svg { width: 34%; }
.lightbox__close {
  position: absolute; inset-block-start: clamp(1rem, 2vw, 2rem); inset-inline-end: clamp(1rem, 2vw, 2rem);
  font-size: var(--fs-ui);
}
.lightbox__close:hover { color: var(--bf-gold); }

/* --- Ansattrutenett (Imogen-referansen: info på hover) ----------------- */

.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* som XD: 4 x 442 px */
  gap: var(--space-sm);
}
@media (max-width: 1100px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); } }
@media (max-width: 359px)  { .team { grid-template-columns: 1fr; } }

.team__card { position: relative; overflow: hidden; }
.team__media { position: relative; aspect-ratio: 442 / 503; overflow: hidden; background: var(--bf-grey-dark); }
.team__media img {
  width: 100%; height: 100%; object-fit: cover;   /* XD: portrettene er i farger */
  transition: transform 1.2s var(--ease-out);
}
.team__card:hover .team__media img,
.team__card:focus-within .team__media img { transform: scale(1.05); }

/* Manglende portrett: nøytral plate med initialer */
.team__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--bf-grey-dark);
  color: rgba(255, 255, 255, .18);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  letter-spacing: .06em;
}

/* Informasjonen ligger UNDER bildet som standard (mobil/touch) slik at
   ansiktet ikke dekkes. På desktop med hover legges den som overlegg. */
.team__info {
  display: flex; flex-direction: column; gap: .1rem;
  padding-block-start: clamp(.5rem, .8vw, .75rem);
}
.team__name { font-size: var(--fs-name); line-height: var(--lh-snug); font-weight: 400; }
.team__role { font-size: var(--fs-ui); color: var(--bf-text-muted); }

.team__contact { display: none; }
.team__contact a { display: block; font-size: var(--fs-ui); line-height: 1.45; overflow-wrap: anywhere; }
.team__contact a:hover { color: var(--bf-gold); }

.team__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .45rem; }
.team__actions .pill { font-size: var(--fs-micro); padding: .4em 1em; min-height: 0; }

@media (hover: hover) and (min-width: 801px) {
  .team__info {
    position: absolute; inset: 0;
    justify-content: flex-end; gap: .15rem;
    padding: clamp(.875rem, 1.25vw, 1.5rem);
    background: linear-gradient(180deg,
        rgba(17,17,17,0) 30%, rgba(17,17,17,.62) 62%, rgba(17,17,17,.93) 100%);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  .team__card:hover .team__info,
  .team__card:focus-within .team__info { opacity: 1; }
  .team__role { color: rgba(255, 255, 255, .72); }
  .team__contact { display: block; margin-block-start: .3rem; }
  .team__actions { display: none; }
}

/* Tekstpaneler i rutenettet (Imogen: sitat + «vi søker folk») */
.team__panel {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-sm);
  aspect-ratio: 442 / 503;
  padding: clamp(1.125rem, 1.6vw, 2rem);
}
.team__panel--gold  { background: var(--bf-gold);  color: var(--bf-black); }
.team__panel--light { background: var(--bf-white); color: var(--bf-black); }
.team__panel .eyebrow { color: rgba(17, 17, 17, .55); }
.team__panel blockquote p { font-size: var(--fs-card); font-style: italic; line-height: var(--lh-snug); }
.team__panel figcaption,
.team__panel__source { font-size: var(--fs-ui); margin-block-start: var(--space-xs); }
.team__panel h3 { font-size: var(--fs-card); line-height: var(--lh-snug); }
.team__panel p { font-size: var(--fs-ui); }
.team__panel .pill { color: var(--bf-black); border-color: rgba(17, 17, 17, .4); }
.team__panel .pill:hover { background: var(--bf-black); border-color: var(--bf-black); color: var(--bf-gold); }
@media (max-width: 800px) {
  .team__panel { aspect-ratio: auto; }
  .team__panel h3, .team__panel blockquote p { font-size: var(--fs-name); }
}

/* --- Faktaboks «Visste du at …» ---------------------------------------- */

.factbox {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-md) var(--space-lg); align-items: start;
}
.factbox__title { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.factbox__body { font-size: var(--fs-lead); line-height: var(--lh-body); }

/* --- Skjema ------------------------------------------------------------ */

.form { display: grid; gap: var(--space-sm); max-width: 46rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-sm); }
.field { display: grid; gap: .4em; }
.field > span { font-size: var(--fs-ui); color: var(--bf-text-muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--fs-ui);
  color: var(--bf-white); background: transparent;
  border: 1px solid var(--bf-hairline);
  padding: .75em .9em;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 8em; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--bf-gold); background: rgba(255, 255, 255, .04);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .3); }
.form__submit { justify-self: start; padding-inline: 2em; }
.form__note { font-size: var(--fs-micro); color: var(--bf-text-muted); }

/* --- FAQ (accordion) --------------------------------------------------- */

.faq { border-block-start: 1px solid var(--bf-hairline); max-width: 60rem; }
.faq__item { border-block-end: 1px solid var(--bf-hairline); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  width: 100%; padding-block: clamp(1rem, 1.35vw, 1.625rem);
  font-size: var(--fs-card); line-height: var(--lh-snug); text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--bf-gold); }
.faq__icon { flex: 0 0 auto; width: 1em; height: 1em; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--bf-gold);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-block-end: clamp(1rem, 1.35vw, 1.625rem); font-size: var(--fs-body); max-width: 58ch; }

/* --- Prisboks (privatfoto) -------------------------------------------- */

.price {
  display: inline-flex; flex-direction: column; gap: .2em;
  padding: clamp(1rem, 1.5vw, 1.75rem) clamp(1.25rem, 2vw, 2.25rem);
  border: 1px solid var(--bf-gold);
}
.price__amount { font-size: var(--fs-statement); line-height: 1; color: var(--bf-gold); }
.price__meta { font-size: var(--fs-ui); color: var(--bf-text-muted); }

/* --- Punktliste med gull-hake ----------------------------------------- */

.ticks { display: grid; gap: var(--space-xs); max-width: 62ch; }
.ticks li { display: flex; gap: .75em; font-size: var(--fs-body); line-height: var(--lh-body); }
.ticks li::before {
  content: ""; flex: 0 0 auto; align-self: flex-start; margin-top: .5em;
  width: clamp(6px, .42vw, 8px); height: clamp(6px, .42vw, 8px); background: var(--bf-gold);
}

/* --- Enkel to-kolonne tekstseksjon ------------------------------------ */

.duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-md) var(--space-lg); align-items: start;
}
.duo__title { font-size: var(--fs-h3); line-height: var(--lh-snug); max-width: 24ch; }

/* XD: bildet på «hvem er vi» er 915 px bredt og sentrert, ikke fullbredde */
.media-band--narrow { width: min(100%, 915px); margin-inline: auto; aspect-ratio: 915 / 381; }

/* Lenke med pil foran (XD kontakt: «→ Send oss en forespørsel», understreket) */
.link-arrow {
  display: inline-flex; align-items: center; gap: clamp(.75rem, 1.15vw, 1.375rem);
  font-size: var(--fs-card);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link-arrow svg { width: clamp(24px, 1.7vw, 32px); flex: 0 0 auto; }
.link-arrow:hover { color: var(--bf-gold); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }

/* XD kontakt: «Jobbe for Bilfoto?»-blokken er rykket inn til x593 (ca. 31 %) */
.indent-block { margin-inline-start: min(31%, 593px); max-width: 1297px; }
@media (max-width: 900px) { .indent-block { margin-inline-start: 0; } }

/* XD produktside: brødtekst i venstre kolonne (første avsnitt 30 px, neste 25 px),
   CTA med pills i høyre kolonne. */
.service-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--space-md) var(--space-lg);
  align-items: start;
}
.service-intro__text { font-size: var(--fs-body); line-height: var(--lh-loose); }
.service-intro__text > p:first-child { font-size: var(--fs-lead); line-height: var(--lh-body); }
.service-intro__text p + p { margin-top: 1.1em; }
.service-intro__cta { display: grid; gap: var(--space-sm); justify-items: center; }
/* XD: CTA-en står på én linje, pillene sentrert under */
.service-intro__cta .cta__title { max-width: none; text-align: center; }
@media (max-width: 900px) {
  .service-intro__cta { justify-items: start; }
  .service-intro__cta .cta__title { text-align: left; }
}

/* Galleri-avstander fra XD: 33 px mellom kolonner, 21 px mellom rader */
.gallery { gap: clamp(.75rem, 1.09vw, 1.3125rem) clamp(1.25rem, 1.72vw, 2.0625rem); }