/*
 * Page layouts for Hund i bevegelse, from the "Website v2" frames (v2.3).
 * Every value is a token or Figma text style. Section padding and side
 * margins come from the layout tokens via .section and .container.
 */

/* Shared bits */
.stack-24 { display: flex; flex-direction: column; gap: var(--spacing-24); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24); }

/* Rectangular photos have radius/lg; round photos use .hero-photo */
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.photo-slot picture {
  height: 100%;
}

.section__header {
  margin-bottom: var(--spacing-48);
}

.section__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-48);
}

.section__footer--left {
  justify-content: flex-start;
}

/* Home hero */
.hero {
  padding-block: var(--spacing-64) var(--spacing-96);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-64);
}

.hero__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
}

.hero__ingress {
  font: var(--text-body-large);
}

/* Photos shrink with the column between 1024px and full desktop width */
.hero__photo {
  width: min(460px, 40%);
}

/* Page Hero (Figma 4143:916) */
.page-hero {
  padding-block: var(--spacing-56) var(--spacing-64);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.page-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-64);
}

.page-hero__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.page-hero__eyebrow {
  color: var(--color-text-accent-inverse);
}

.page-hero__title {
  font: var(--text-heading-h1);
}

.page-hero__ingress {
  font: var(--text-body-large);
}

.page-hero__photo {
  width: min(340px, 35%);
}

/* Contact strip and membership logos under the home hero */
.contact-strip {
  padding-block: var(--spacing-24);
}

.contact-strip .contact-list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-16) var(--spacing-64);
}

.membership {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.membership__label {
  color: var(--color-text-muted);
}

.membership .logo-strip {
  row-gap: var(--spacing-24);
}

.membership--strip {
  padding-block: var(--spacing-16) var(--spacing-48);
}

.membership--section {
  padding-block: var(--spacing-56);
  background: var(--color-bg-section);
}

/* Split layouts: photo beside text */
.split {
  display: flex;
  align-items: center;
  gap: var(--spacing-64);
}

.split > * {
  flex: 1;
}

.split--top {
  align-items: flex-start;
}

.split__photo {
  flex: 0 1 520px;
  min-width: 0;
  height: 420px;
}

.split__photo--sticky {
  position: sticky;
  top: var(--spacing-32);
}

.split__photo--wide {
  flex-basis: 560px;
  height: 440px;
}

.split__photo--tall {
  flex: 1;
  width: auto;
  height: 600px;
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Grids */
.grid {
  display: grid;
  gap: var(--spacing-24);
  padding: 0;
  list-style: none;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Consultation steps: 3×2 on desktop with equal heights per row */
.grid--steps {
  gap: var(--spacing-32);
}

/* Long text (Figma Rich Text 4109:5676): spacing/16 within a block,
   spacing/40 between blocks; built only from design text styles */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  max-width: var(--layout-measure);
}

.prose--center {
  margin-inline: auto;
}

.prose__block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.prose h2 {
  font: var(--text-heading-h2);
  color: var(--color-text-primary);
}

.prose h3 {
  font: var(--text-heading-h3);
  color: var(--color-text-primary);
}

.prose__block > p,
.prose > p {
  font: var(--text-body-intro);
  color: var(--color-text-primary);
}

.prose__block > p.prose__small {
  font: var(--text-body-medium);
  color: var(--color-text-muted);
}

.prose__block > p a,
.prose > p a {
  color: var(--color-text-accent);
  text-decoration: underline;
}

.prose .photo {
  height: auto;
}

/* Om meg: block headings use Heading/H3 (Figma), still h2 in the outline */
.prose--compact h2 {
  font: var(--text-heading-h3);
}

@media (max-width: 767px) {
  .prose h2 {
    font: var(--text-heading-h2-mobile);
  }
}

/* Treatment page: text column and facts column */
.treatment {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-64);
}

.treatment__main {
  flex: 1;
  max-width: var(--layout-measure);
}

.treatment__facts {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  width: 344px;
}

.treatment__facts .note,
.treatment__facts .button,
.treatment__photo {
  align-self: stretch;
}

/* photo-side: 344 × 432 in Figma */
.treatment__photo {
  aspect-ratio: 344 / 432;
}

.treatment__photo picture {
  height: 100%;
}

/* Behandlingssted */
.place__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.place__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.place__intro {
  font: var(--text-body-intro);
  color: var(--color-text-primary);
}

.place__body {
  font: var(--text-body-medium);
  color: var(--color-text-muted);
}

.place .list {
  gap: var(--spacing-12);
}

/* CTA block */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.cta__text {
  max-width: 606px;
  font: var(--text-body-intro);
}

.cta .button-row {
  justify-content: center;
}

/* Thank-you page (Figma 4112:6330) */
.thanks {
  padding-block: var(--spacing-128);
  background: var(--color-bg-surface);
}

.thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.thanks__icon {
  width: 48px;
  height: 48px;
  color: var(--color-icon-accent);
}

.thanks__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  max-width: 640px;
}

.thanks__eyebrow {
  color: var(--color-text-accent);
}

.thanks__ingress {
  font: var(--text-body-large);
  color: var(--color-text-muted);
}

/* Contact page */
.contact-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-80);
}

.contact-layout > * {
  flex: 1;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-40);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  scroll-margin-top: var(--spacing-24);
}

.form-card .button {
  align-self: flex-start;
}

.form-card__note {
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

/* Prices */
.price-table__note {
  margin-top: var(--spacing-16);
}

.kjoring {
  padding-block: var(--spacing-32) var(--layout-section-y);
}

.kjoring__notes {
  margin-top: var(--spacing-32);
}

.priser-cards {
  padding-block: var(--layout-section-y) var(--spacing-64);
}

/* Tablet */
@media (max-width: 1023px) {
  .page-hero__title {
    font: var(--text-heading-h2);
  }

  .hero__inner {
    gap: var(--spacing-48);
  }

  .hero__photo,
  .page-hero__photo {
    width: 280px;
  }

  .split,
  .split--top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-40);
  }

  .split__photo,
  .split__photo--wide {
    flex: none;
    width: 100%;
    height: 380px;
  }

  .split__photo--tall {
    flex: none;
    height: 552px;
  }

  .split__photo--sticky {
    position: static;
  }

  .treatment {
    flex-direction: column;
    gap: var(--spacing-48);
  }

  .treatment__facts {
    width: 100%;
  }

  /* photo-side: 738 × 492 on tablet, 345 × 232 on mobile */
  .treatment__photo {
    aspect-ratio: 3 / 2;
  }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--treatments { grid-template-columns: 1fr; }
  .grid--steps { gap: var(--spacing-24); }

  .contact-layout {
    gap: var(--spacing-40);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero {
    padding-block: var(--spacing-64);
  }

  .hero__inner,
  .page-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-32);
  }

  .hero__ingress,
  .page-hero__ingress {
    font: var(--text-body-intro);
  }

  .page-hero__title {
    font: var(--text-heading-h1-mobile);
  }

  /* Round photos fill the column on mobile (site owner's choice) */
  .hero__photo,
  .page-hero__photo {
    width: 100%;
  }

  .split__photo,
  .split__photo--wide {
    height: 250px;
  }

  .split__photo--tall {
    height: 432px;
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .thanks {
    padding-block: var(--spacing-80);
  }

  .contact-layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-48);
  }

  .form-card {
    padding: var(--spacing-24);
  }
}

.page-hero__ingress a {
  color: var(--color-text-accent-inverse);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .prose--compact h2 {
    font: var(--text-heading-h3);
  }
}