/* Shared patterns of the marketing pages (M3b), linked by templates/pages/_marketing_base.html after the page's
   own css/pages/<key>.css. Tokens and tone variables only (docs/styleguide.md); breakpoints 991 / 767 / 479. */

/* ---- feature areas (pages/_feature_areas.html): link cards with a library icon ------------------------- */
.area-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.area-card { display: flex; flex-direction: column; }
.area-card .card__title { margin-bottom: 8px; }
.area-card__link { color: inherit; text-decoration: none; }
.area-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
.area-card__link:focus-visible { outline: none; }
.card--link:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.area-card .card__text { flex: 1 1 auto; margin-bottom: 16px; }
.area-card:hover .area-card__more { gap: 12px; color: var(--link-hover); }
@media (max-width: 991px) { .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .area-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---- image/text rows of the feature pages ---------------------------------------------------------------- */
.feature-row__text { margin-bottom: 20px; }
.feature-row__text p + p { margin-top: 12px; }
.feature-row .check-list { margin-bottom: 20px; }
.feature-row__media { display: grid; gap: 24px; justify-items: center; }
.feature-row__media img { width: auto; max-width: 100%; }
.feature-row__media .video { width: 100%; }

/* ---- toolbox: the dark "værktøjskasse" feature grid ------------------------------------------------------ */
.toolbox .feature-grid { gap: 40px 32px; }
.toolbox .feature--stacked .feature__icon { background: var(--gp-dark-raised); --icon-surface: var(--gp-dark-raised); color: inherit; }
.toolbox .feature__title { font-size: var(--fs-h6); }
.toolbox .feature__text a { color: var(--link); }

/* ---- design template cards (pages/_design_cards.html) ---------------------------------------------------- */
.design-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.design-card { display: flex; flex-direction: column; }
.design-card__media { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--card-alt); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); }
.design-card__media:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.design-card__img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 8; object-fit: cover; object-position: top; }
.design-card__body { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.design-card__name { margin: 0; }
.design-card__text { color: var(--muted); font-size: var(--fs-medium); margin: 0; }
.design-card__price { margin: 0; font-variant-numeric: tabular-nums; }
.design-card__demo { margin-top: auto; padding-top: 4px; }
@media (max-width: 479px) { .design-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* ---- testimonials grid (quote text at body size: the quotes are long) */
.quote-grid .testimonial__quote { font-size: var(--fs-body); line-height: 1.6; }
/* ---- ----------------------------------------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 767px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- plan comparison table (funktioner, priser) ---------------------------------------------------------- */
.plan-table-wrap { overflow: visible; } /* the table fits at every width (narrow plan columns); lets the head stick */
.plan-table { min-width: 100%; table-layout: fixed; overflow: visible; }
.plan-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.plan-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.plan-table col.plan-table__feature { width: auto; }
.plan-table col.plan-table__plan { width: 140px; }
.plan-table thead th { position: sticky; top: var(--header-h); z-index: 2; white-space: normal; vertical-align: bottom; }
.plan-table thead th:not(:first-child) { text-align: center; }
.plan-table__plan-name { display: block; font-size: var(--fs-h6); color: var(--heading); }
.plan-table__plan-price { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.plan-table tbody th { font-weight: 500; overflow-wrap: break-word; hyphens: auto; }
.plan-table__desc { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.plan-table tbody td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.plan-table .plan-table__group th { background: var(--card-alt); color: var(--heading); font-weight: 600; font-size: var(--fs-medium); padding-block: 12px; }
.plan-table__value { font-size: var(--fs-small); font-weight: 500; }
.plan-table tfoot td, .plan-table tfoot th { padding-block: 20px; border-bottom: 0; border-top: 1px solid var(--border); }
.plan-table tfoot .btn { padding-inline: 12px; white-space: nowrap; }
@media (max-width: 767px) {
  .plan-table { font-size: var(--fs-small); }
  .plan-table col.plan-table__plan { width: 76px; }
  .plan-table th, .plan-table td { padding: 10px 4px; }
  .plan-table tbody th, .plan-table thead th:first-child, .plan-table tfoot td:first-child { padding-left: 12px; }
  .plan-table__plan-name { font-size: 13px; }
  .plan-table__plan-price, .plan-table__value { font-size: var(--fs-xsmall); }
  .plan-table__desc { font-size: var(--fs-xsmall); }
  .plan-table tfoot .btn { min-height: 34px; padding-inline: 4px; font-size: var(--fs-xsmall); white-space: normal; line-height: 1.2; }
}

/* ---- text pages (pages/_text_page.html): legal texts, GDPR, guides ---------------------------------------- */
.text-hero .hero__inner { max-width: var(--container-text); }
.text-layout { display: grid; grid-template-columns: minmax(0, var(--container-text)) minmax(0, 320px); gap: 64px; align-items: start; justify-content: space-between; }
.text-layout--single { grid-template-columns: minmax(0, var(--container-text)); }
.text-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.text-layout__body > :first-child { margin-top: 0; }
@media (max-width: 991px) {
  .text-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .text-layout__aside { position: static; }
}

/* ---- order and form pages -------------------------------------------------------------------------------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.form-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.form-layout--single { grid-template-columns: minmax(0, 1fr); max-width: var(--container-text); margin-inline: auto; }
@media (max-width: 991px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .form-layout__aside { position: static; }
}
.summary-card .check-list { margin-bottom: 0; }
.summary-card__price { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; margin: 4px 0 2px; color: var(--heading); }
.summary-card__period { color: var(--muted); font-size: var(--fs-small); margin-bottom: 16px; }
.summary-card__note { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); }

.form-card .form-wrap { margin: 0; }
.form-card__intro { margin-bottom: 24px; }
.form-card__intro p + p { margin-top: 12px; }
.form-aside__img { display: block; max-width: 200px; height: auto; margin-bottom: 20px; }
.form-aside .check-list { margin-top: 16px; }
.form-aside__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.form-aside__features h3 { margin-bottom: 4px; }
.form-aside__note { margin-top: 16px; }

/* ---- message pages (pages/_message_page.html) ------------------------------------------------------------ */
.message-hero { min-height: 52vh; display: flex; align-items: center; }
.message-hero > .container { width: 100%; }
.message-hero .hero__text p + p { margin-top: 12px; }