/* Layout settings use the actual block host, including editor device previews. */
.evlog-layout {
  container: evlog-layout / inline-size;
  display: flow-root;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.evlog-layout > .evlog-about {
  --evlog-space-top: var(--evlog-margin-desktop-top, 0px);
  --evlog-space-right: var(--evlog-margin-desktop-right, 0px);
  --evlog-space-bottom: var(--evlog-margin-desktop-bottom, 0px);
  --evlog-space-left: var(--evlog-margin-desktop-left, 0px);
  --evlog-space-limit: max(0px, calc((100% - 280px) / 2));
  --evlog-space-left-safe: min(var(--evlog-space-left), var(--evlog-space-limit));
  --evlog-space-right-safe: min(var(--evlog-space-right), var(--evlog-space-limit));
  width: calc(100% - var(--evlog-space-left-safe) - var(--evlog-space-right-safe));
  margin: var(--evlog-space-top) var(--evlog-space-right-safe) var(--evlog-space-bottom) var(--evlog-space-left-safe);
  min-width: 0;
}
.evlog-layout .evlog-about .evlog__inner {
  --evlog-gutter-active: var(--evlog-gutter-desktop, calc(54 * var(--evlog-unit)));
  --evlog-gutter-limit: max(0px, calc((100% - 720px) / 2));
  --evlog-gutter-safe: min(var(--evlog-gutter-active), var(--evlog-gutter-limit));
  width: calc(100% - var(--evlog-gutter-safe) - var(--evlog-gutter-safe));
  max-width: var(--evlog-content-width, 1140px);
}
/* Keep long lines and an oversized profile card readable on very wide monitors. */
.evlog-layout .evlog__intro-copy { max-width: 60ch; }
.evlog-layout .evlog__profile { width: 100%; max-width: 520px; justify-self: end; }
@container evlog-layout (max-width: 899px) {
  .evlog-layout > .evlog-about {
    --evlog-space-top: var(--evlog-margin-tablet-top, var(--evlog-margin-desktop-top, 0px));
    --evlog-space-right: var(--evlog-margin-tablet-right, var(--evlog-margin-desktop-right, 0px));
    --evlog-space-bottom: var(--evlog-margin-tablet-bottom, var(--evlog-margin-desktop-bottom, 0px));
    --evlog-space-left: var(--evlog-margin-tablet-left, var(--evlog-margin-desktop-left, 0px));
  }
}
@container evlog-layout (max-width: 599px) {
  .evlog-layout > .evlog-about {
    --evlog-space-top: var(--evlog-margin-mobile-top, var(--evlog-margin-tablet-top, var(--evlog-margin-desktop-top, 0px)));
    --evlog-space-right: var(--evlog-margin-mobile-right, var(--evlog-margin-tablet-right, var(--evlog-margin-desktop-right, 0px)));
    --evlog-space-bottom: var(--evlog-margin-mobile-bottom, var(--evlog-margin-tablet-bottom, var(--evlog-margin-desktop-bottom, 0px)));
    --evlog-space-left: var(--evlog-margin-mobile-left, var(--evlog-margin-tablet-left, var(--evlog-margin-desktop-left, 0px)));
  }
}
@container evlog (max-width: 899px) {
  .evlog-layout .evlog-about .evlog__inner { --evlog-gutter-active: var(--evlog-gutter-tablet, var(--evlog-gutter-desktop, 32px)); --evlog-gutter-limit: max(0px, calc((100% - 600px) / 2)); }
}
@container evlog (max-width: 599px) {
  .evlog-layout .evlog-about .evlog__inner { --evlog-gutter-active: var(--evlog-gutter-mobile, var(--evlog-gutter-tablet, var(--evlog-gutter-desktop, 20px))); --evlog-gutter-limit: max(0px, calc((100% - 240px) / 2)); }
}
@supports not (container-type: inline-size) {
  @media (max-width: 899px) {
    .evlog-layout > .evlog-about {
      --evlog-space-top: var(--evlog-margin-tablet-top, var(--evlog-margin-desktop-top, 0px));
      --evlog-space-right: var(--evlog-margin-tablet-right, var(--evlog-margin-desktop-right, 0px));
      --evlog-space-bottom: var(--evlog-margin-tablet-bottom, var(--evlog-margin-desktop-bottom, 0px));
      --evlog-space-left: var(--evlog-margin-tablet-left, var(--evlog-margin-desktop-left, 0px));
    }
    .evlog-layout .evlog-about .evlog__inner { --evlog-gutter-active: var(--evlog-gutter-tablet, var(--evlog-gutter-desktop, 32px)); --evlog-gutter-limit: max(0px, calc((100% - 600px) / 2)); }
  }
  @media (max-width: 599px) {
    .evlog-layout > .evlog-about {
      --evlog-space-top: var(--evlog-margin-mobile-top, var(--evlog-margin-tablet-top, var(--evlog-margin-desktop-top, 0px)));
      --evlog-space-right: var(--evlog-margin-mobile-right, var(--evlog-margin-tablet-right, var(--evlog-margin-desktop-right, 0px)));
      --evlog-space-bottom: var(--evlog-margin-mobile-bottom, var(--evlog-margin-tablet-bottom, var(--evlog-margin-desktop-bottom, 0px)));
      --evlog-space-left: var(--evlog-margin-mobile-left, var(--evlog-margin-tablet-left, var(--evlog-margin-desktop-left, 0px)));
    }
    .evlog-layout .evlog-about .evlog__inner { --evlog-gutter-active: var(--evlog-gutter-mobile, var(--evlog-gutter-tablet, var(--evlog-gutter-desktop, 20px))); --evlog-gutter-limit: max(0px, calc((100% - 240px) / 2)); }
  }
}

/* A contact section is a conversation, so its two sides stay together on wide screens. */
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__inner.evlog__contact-grid {
  width: min(var(--evlog-contact-width, 1320px), calc(100% - var(--evlog-gutter-safe) - var(--evlog-gutter-safe)));
}
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__audiences {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  margin-top: 24px;
}
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__audience {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 112px;
  padding: 20px;
  border: 1px solid #dde4eb;
  border-radius: 6px;
  background: rgba(255, 255, 255, .82);
}
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__audience-icon { width: 32px; height: 32px; }
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__audience h3 { font-size: 18px; line-height: 1.35; }
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__audience p { margin-top: 4px; font-size: 16px; line-height: 1.45; }
.evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__profile {
  max-width: 480px;
  border: 1px solid rgba(16, 35, 49, .08);
  border-radius: 6px;
  background: linear-gradient(145deg, #fff, #edf1f5 85%);
  box-shadow: 0 16px 40px rgba(14, 34, 48, .04);
}
/* Smaller explicit caps retain the compact two-column type sizing. */
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__contact-grid { grid-template-columns: 1.4fr 1fr; gap: 28px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__contact-title { font-size: 32px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__contact-description { font-size: 15px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__profile { padding: 24px 18px 24px 22px; grid-template-columns: 1fr 16px; gap: 12px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__profile-name { font-size: 20px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__profile-role { font-size: 13px; }
.evlog-layout .evlog-about[data-contact-narrow="true"] .evlog__monogram { width: 150px; height: 110px; }
@container evlog (min-width: 900px) {
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__contact-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: clamp(28px, 4cqw, 64px);
  }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__contact-copy { flex: 1.4 1 400px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__profile {
    flex: 1 1 320px;
    align-self: stretch;
    margin-inline: auto;
    padding: 30px;
    gap: 20px;
  }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__profile-main { display: flex; flex-direction: column; align-items: flex-start; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__monogram { width: 210px; height: 146px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__monogram-text { font-size: 112px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__profile-rule { width: 36px; margin-top: 22px; margin-bottom: 16px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__profile-role { margin-bottom: 24px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__circle-link { width: 48px; height: 48px; padding: 14px; margin-top: auto; }
}
@container evlog (max-width: 599px) {
  .evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__contact-title { font-size: clamp(29px, 7cqw, 36px); }
  .evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__contact-description { font-size: 16px; }
  .evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__profile { padding: 28px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__contact-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 48px; }
    .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__contact-copy { flex: 1.4 1 400px; }
    .evlog-layout .evlog-about[data-contact-layout="balanced"][data-contact-narrow="false"] .evlog__profile { flex: 1 1 320px; margin-inline: auto; }
  }
  @media (max-width: 599px) {
    .evlog-layout .evlog-about[data-contact-layout="balanced"] .evlog__contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
  }
}