/* Slider for the references section. Mirrors the original styles.css. */

/* Sticky-footer layout: footer always sits at the bottom of the viewport
   on short pages (404, archive with few posts, etc.) instead of floating
   in the middle. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wp-site-blocks > main {
  flex: 1 0 auto;
}
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
  flex-shrink: 0;
}

/* WP injects 24px margin-block-start between every block — both top-level
   sections AND every element inside them. The static site uses explicit
   inline margins for spacing, so kill WP's auto-gap entirely and let the
   pattern inline styles drive vertical rhythm. */
.wp-block-group > *,
.wp-block-post-content > *,
.wp-site-blocks > *,
main > *,
section > *,
article > * {
  margin-block-start: 0 !important;
}

/* Body should have no surrounding margins — root padding is 0 already
   but make sure the wp-site-blocks wrapper doesn't add any of its own. */
.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Body uses Fraunces serif (matches the static site default). */
body {
  font-family: var(--wp--preset--font-family--fraunces) !important;
}

/* Headings — match the static site exactly. */
h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Responsive page-edge padding — matches the static site's --page-x.
   On wide viewports, padding grows so content stays centered at 1200px max width. */
:root {
  --content-max: 1200px;
  --page-x: max(72px, (100vw - var(--content-max)) / 2);
}

@media (max-width: 1023px) {
  :root { --page-x: 48px; }
}

@media (max-width: 767px) {
  :root { --page-x: 24px; }
}

/* Override WP's hardcoded xl-spacing on each section so they use the responsive padding.
   Sections keep their backgrounds full-width while content stays centered. */
#site-nav,
#hero,
#essay,
#foredrag,
#om,
#cta,
#testimonial,
#essays-header,
#essays-list,
#site-footer,
.essay-block,
.promise,
.om,
.foredrag,
.cta,
.testimonial {
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}

article.essay {
  padding-left: var(--page-x) !important;
  padding-right: var(--page-x) !important;
}

/* Nav menu font (inherit via parent's fontFamily would normally work but
   WP global styles set body to Fraunces — be explicit on the nav children). */
#site-nav,
#site-nav-menu,
#site-nav-menu a {
  font-family: var(--wp--preset--font-family--inter);
}

#site-nav-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#site-nav-menu li { margin: 0; }

#site-nav-menu a {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
}

#site-nav-menu a:hover,
#site-nav-menu a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: none;
}

.wordmark:hover,
.wordmark:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  outline: none;
}

/* Sticky header — must apply to the outer <header class="wp-block-template-part">
   wrapper, not the inner <nav>. WP wraps template parts in their own element which
   is only as tall as the nav, leaving the inner sticky no scroll room to stick in. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wp--preset--color--paper);
}

/* When clicking a hash link (e.g. /#foredrag), browsers scroll the target
   element to the top of the viewport — but the sticky header covers it.
   scroll-margin-top adds a buffer so the section title isn't hidden. */
html { scroll-padding-top: 80px; }
#hero, #essay, #foredrag, #om, #cta, #testimonial, #essays-header {
  scroll-margin-top: 80px;
}

/* When admin bar is showing, push the sticky header below it.
   WP shows the admin bar at 32px above 782px width, 46px between 601-782px,
   and hides it entirely below 600px — so reset to top: 0 there. */
body.admin-bar header.wp-block-template-part {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar header.wp-block-template-part {
    top: 0;
  }
}

#site-nav button.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

#site-nav button.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--wp--preset--color--ink);
  margin: 5px 0;
}

/* Mobile responsive overrides — match static site's @media rules. */
@media (max-width: 1023px) {
  /* Hero shrinks */
  #hero h1 { font-size: 44px !important; }
  #hero .lede { font-size: 18px !important; }

  /* Essay block stacks */
  .essay-block {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .essay-block .body h2 { font-size: 28px !important; }

  /* Promise poles mobile/tablet: see the dedicated .poles rules below. */

  /* CTA */
  .cta h2 { font-size: 36px !important; }
}

@media (max-width: 767px) {
  /* Mobile nav: hamburger visible, menu hidden until opened */
  #site-nav {
    flex-wrap: wrap !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  #site-nav .edition { display: none !important; }
  #site-nav button.hamburger { display: block; }
  #site-nav-menu {
    display: none;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 18px 0 6px;
  }
  #site-nav-menu.open { display: flex; }

  /* Hero further shrinks */
  #hero {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }
  #hero h1 { font-size: 36px !important; }
  #hero .lede { font-size: 16px !important; }
  #hero .cta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  /* All major sections lose extra vertical padding */
  #essay,
  #foredrag,
  #om,
  #promise,
  #cta,
  #testimonial,
  .essay-block,
  .promise,
  .foredrag,
  .om,
  .cta,
  .testimonial {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Foredrag talks stack to single column */
  .foredrag .talk {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 20px 0 !important;
  }

  /* Om stacks portrait + bio. WP sets is-layout-flex from the pattern so
     override flex-direction, not just grid-template-columns. */
  .om {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .om .portrait img {
    width: 160px;
    height: 213px;
  }

  /* Smaller testimonial blockquote */
  .testimonial blockquote { font-size: 22px !important; }

  /* CTA */
  .cta h2 { font-size: 30px !important; }

  /* Footer stacks */
  #site-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #site-footer .links a {
    margin-left: 0 !important;
    margin-right: 16px !important;
  }
}

.references-slider {
  max-width: 1000px;
  margin: 0 auto;
}

.references-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.references-track::-webkit-scrollbar { display: none; }

.references-track .reference {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  min-height: 340px;
}

.reference-logo {
  max-height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  background: var(--wp--preset--color--paper);
  padding: 10px 16px;
  border-radius: 4px;
}

.references-track blockquote {
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
  color: var(--wp--preset--color--paper);
  max-width: 58ch;
}

.references-track figcaption {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: auto;
}

.references-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.references-nav .nav-prev,
.references-nav .nav-next {
  background: transparent;
  color: var(--wp--preset--color--paper);
  border: 0;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 150ms;
  width: 28px;
  height: 28px;
}

.references-nav .nav-prev:hover,
.references-nav .nav-next:hover {
  opacity: 1;
  outline: none;
}

.references-nav .nav-prev:focus-visible,
.references-nav .nav-next:focus-visible {
  opacity: 1;
  outline: 2px solid var(--wp--preset--color--paper);
  outline-offset: 3px;
}

.references-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.references-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(243, 237, 226, 0.3);
  cursor: pointer;
  transition: background 200ms;
}

.references-dots .dot[aria-current="true"] { background: var(--wp--preset--color--paper); }

.references-dots .dot:focus-visible {
  outline: 2px solid var(--wp--preset--color--paper);
  outline-offset: 3px;
}

/* Single-essay article: fill the viewport width like the homepage sections,
   with the inner content (header + article body) constrained to 1200px and
   centered. WP's is-layout-constrained wants to cap the article itself at
   1200px — override that. */
article.essay {
  max-width: none !important;
}

article.essay > .essay-header,
article.essay > .essay-article {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Rail sits horizontally at the top of the article (after the header
   border), then the body fills the full width below. No side column. */
.essay-article {
  display: block !important;
}

.essay-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.essay-rail .essay-meta {
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.essay-rail .essay-back {
  display: inline-block;
  margin: 0 0 0 auto !important;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  padding-bottom: 2px;
}

/* The back link is wrapped in a <p> by Gutenberg — push the WHOLE paragraph
   to the right of the flex row so the link sits at the end of the rail. */
.essay-rail > p:has(.essay-back) {
  margin: 0 0 0 auto !important;
}

.essay-rail .essay-back:hover {
  opacity: 0.7;
  outline: none;
}

.essay-rail .essay-back:focus-visible {
  opacity: 0.7;
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

.essay .wp-block-post-content p {
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 1em;
  max-width: 62ch;
}

.essay .wp-block-post-content h2 {
  font-size: 26px;
  line-height: 1.2;
  margin-top: 48px;
  margin-bottom: 16px;
  max-width: 28ch;
}

.essay .wp-block-post-content blockquote {
  font-size: 24px;
  line-height: 1.4;
  font-style: italic;
  border-left: 2px solid var(--wp--preset--color--ink);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  max-width: 38ch;
}

/* Rail layout is horizontal at all viewports now — no separate mobile
   override needed. Just tighten gap on small screens. */
@media (max-width: 767px) {
  .essay-rail {
    gap: 8px 20px;
    padding-bottom: 12px;
    margin-bottom: 24px;
  }
  .essay-rail > p:has(.essay-back) {
    margin-left: 0 !important;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .essay .wp-block-post-content h2 { font-size: 22px; }
  .essay .wp-block-post-content blockquote {
    font-size: 20px;
    margin: 24px 0;
  }
}

/* Essays archive list — match static site's .essay-row layout. */
.essay-rows {
  counter-reset: essay;
  display: block;
}

.essay-row {
  display: grid !important;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  padding: 28px 0 !important;
  border-top: 1px solid var(--wp--preset--color--rule);
  align-items: baseline;
  position: relative;
  text-decoration: none;
  color: inherit;
  counter-increment: essay;
}

.essay-rows > .essay-row:last-child,
.essays-list > .essay-row:last-child,
.wp-block-query .essay-row:last-of-type {
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Auto-incrementing number "01", "02", "03" via CSS counter — fills the
   first grid cell. */
.essay-row::before {
  content: counter(essay, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.75;
  text-transform: uppercase;
}

/* Make the whole row clickable by stretching the post-title link to cover it. */
.essay-row .wp-block-post-title a {
  text-decoration: none;
  color: inherit;
}
.essay-row .wp-block-post-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.essay-row:hover .wp-block-post-title a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The body wrapper holds title + deck in grid column 2 (the 1fr column).
   Reset its inner layout so children stack normally. */
.essay-row .essay-row-body {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.essay-row .wp-block-post-title {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px !important;
}

.essay-row .essay-row-deck {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
  margin: 0 !important;
  max-width: 62ch;
}

.essay-row .essay-meta-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.essay-row .essay-meta {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 !important;
}

/* Insert a "·" separator between the date and reading-time inside the meta wrap. */
.essay-row .essay-meta-wrap .reading-time {
  margin: 0 !important;
}
.essay-row .essay-meta-wrap .reading-time::before {
  content: '·';
  margin-right: 6px;
  opacity: 0.6;
}

/* Single essay rail: reading-time is a separate paragraph below the date. */
.essay-rail .reading-time {
  display: block;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 8px !important;
}

@media (max-width: 1023px) {
  /* Essays archive header shrinks on tablet/mobile. */
  #essays-header h1 {
    font-size: 44px !important;
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  /* Essays archive: even smaller h1, tighter section padding. */
  #essays-header {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }
  #essays-header h1 { font-size: 34px !important; }
  #essays-list { padding-top: 16px !important; padding-bottom: 64px !important; }

  /* Essay rows: number narrower, title + deck takes the rest, meta on its
     own line spanning both columns. */
  .essay-row {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 24px 0 !important;
  }
  .essay-row .essay-meta-wrap {
    grid-column: 1 / -1;
    font-size: 10px;
    margin-top: 4px !important;
    flex-direction: row !important;
  }
  .essay-row .essay-meta {
    font-size: 10px;
  }
  .essay-row .wp-block-post-title { font-size: 22px !important; }
  .essay-row .essay-row-deck { font-size: 14px !important; }
}

@media (max-width: 1023px) {
  /* Stack rail (number + topic) above body. WP sets is-layout-flex on
     this section so override flex-direction, not grid-template-columns. */
  .essay-block {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .essay-block .body h2 {
    font-size: 28px !important;
  }
}

/* Promise diagram: two poles + arrow.
   Desktop: 3-column grid (left pole | arrow | right pole), arrow vertically
   centered across the full pole content (heading + description).
   Mobile: vertical flex stack — pole left, arrow (rotated 90°), pole right.
   On mobile the .pole becomes a real flex child (no display:contents). */
.poles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 48px;
  align-items: center;
}
.poles .pole {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poles .pole.left  { grid-column: 1; text-align: right; align-items: flex-end; }
.poles .pole.right { grid-column: 3; }
.poles .arrow      { grid-column: 2; }

.poles .pole h3 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.poles .pole.left h3 {
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.poles .pole p {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 14px;
  line-height: 1.55;
  max-width: 28ch;
  opacity: 0.75;
  margin: 0;
}
.poles .arrow {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 32px;
  line-height: 1;
  opacity: 0.5;
  align-self: center;
  text-align: center;
}

@media (max-width: 1023px) {
  /* Stack vertically. Order via DOM: left, arrow, right — exactly what
     the user asked for. flex column doesn't have row leakage issues. */
  .poles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .poles .pole.left {
    text-align: left;
    align-items: stretch;
  }
  .poles .pole h3 { font-size: 34px; }
  .poles .arrow { transform: rotate(90deg); font-size: 28px; }
}

.foredrag-photo {
  margin: 0 0 40px;
}
.foredrag-photo img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
}

.foredrag .talk {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid var(--wp--preset--color--rule);
  align-items: baseline;
}
.foredrag .talk:last-child {
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.foredrag .talk .num {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.foredrag .talk h3 {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 22px;
  margin: 0 0 6px;
}
.foredrag .talk .body p {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.75;
  max-width: 62ch;
}
.foredrag .talk .meta {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  text-transform: uppercase;
}

/* Contact form (Kontakt page) */
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.contact-field {
  display: grid;
  gap: 6px;
}

.contact-field > span {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.contact-field input,
.contact-field textarea {
  font-family: var(--wp--preset--font-family--fraunces);
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  background: var(--wp--preset--color--paper-soft);
  color: var(--wp--preset--color--ink);
  width: 100%;
  box-sizing: border-box;
}

.contact-submit {
  box-sizing: border-box;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
  border-color: var(--wp--preset--color--ink);
}

.contact-field textarea { resize: vertical; min-height: 120px; }

.contact-submit {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  border: 0;
  padding: 15px 32px;
  cursor: pointer;
  width: 100%;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  background: #000;
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-message {
  max-width: 560px;
  margin: 0 auto 24px auto;
  padding: 16px 20px;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 14px;
  line-height: 1.5;
}
.contact-success {
  background: var(--wp--preset--color--paper-warm);
  border-left: 3px solid var(--wp--preset--color--ink);
}
.contact-error {
  background: #f8d7da;
  border-left: 3px solid #c33;
}

/* Consent banner — appears at bottom on first visit, asks before loading GA. */
.mahdi-consent-banner {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 720px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  padding: 18px 24px;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wp--preset--font-family--inter);
}

.mahdi-consent-text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.mahdi-consent-buttons {
  display: flex;
  gap: 12px;
}

.mahdi-consent-banner button {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--wp--preset--color--paper);
  border-radius: 2px;
}

.mahdi-consent-decline {
  background: transparent;
  color: var(--wp--preset--color--paper);
}
.mahdi-consent-accept {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

.mahdi-consent-banner button:hover,
.mahdi-consent-banner button:focus-visible {
  outline: 2px solid var(--wp--preset--color--paper);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .mahdi-consent-banner {
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 14px 16px;
  }
  .mahdi-consent-buttons { width: 100%; }
  .mahdi-consent-banner button { flex: 1; }
}

/* Calendly popup: hide the outer loading spinner — the iframe shows its
   own once it starts loading, so two stacked spinners look broken. */
.calendly-spinner,
.calendly-overlay .calendly-popup .calendly-spinner {
  display: none !important;
}

/* Make talk rows feel clickable when wired to Calendly. */
.foredrag .talk.book-trigger {
  cursor: pointer;
  transition: opacity 150ms;
}
.foredrag .talk.book-trigger:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foredrag .talk.book-trigger:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .foredrag .talk {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
}

.om .portrait img {
  width: 220px;
  height: 293px;
  border-radius: 4px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .om {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .om .portrait img {
    width: 160px;
    height: 213px;
  }
}

@media (max-width: 1023px) {
  .cta h2 { font-size: 36px !important; }
}
@media (max-width: 767px) {
  .cta h2 { font-size: 30px !important; }
}