/* ========================================================================== 
   Semioticom expandable editorial section
   ========================================================================== */

.editorial{
  position: relative;
  margin-top: var(--sem-section-gap-y, clamp(72px, 9vw, 128px));
  color: var(--sem-text, #1e2f4a);
}

.editorial > .container{
  position: relative;
  /* Match the refreshed site shell width used by the other wide elements.
     The internal editorial grid stays unchanged, so the built alignment logic
     between thesis, summary, button, image, and caption is preserved. */
  width: min(1320px, calc(100% - clamp(32px, 7vw, 120px)));
  max-width: 1320px;
}

.editorial__panel{
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sem-border, rgba(30,47,74,0.10));
  border-radius: var(--sem-radius-section, 32px);
  box-shadow: var(--sem-shadow-md, 0 16px 40px rgba(30,47,74,0.10));
  padding: clamp(32px, 3.4vw, 54px) clamp(34px, 4vw, 62px);
}

.editorial__accent{
  position: absolute;
  top: clamp(32px, 3.4vw, 54px);
  bottom: clamp(32px, 3.4vw, 54px);
  left: clamp(24px, 3vw, 42px);
  width: 7px;
  border-radius: 999px;
  background: var(--sem-cta, #ff6a00);
  pointer-events: none;
}

.editorial__teaser{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "body";
  gap: clamp(26px, 3vw, 42px);
  padding-left: clamp(28px, 4vw, 54px);
}

.editorial__header{
  grid-area: header;
  min-width: 0;
  max-width: 1280px;
}

.editorial__body{
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 0.85fr);
  grid-template-areas: "copy visual";
  column-gap: clamp(46px, 5.4vw, 92px);
  align-items: start;
  --editorial-visual-frame-h: clamp(286px, 18.6vw, 322px);
  --editorial-visual-caption-gap: 14px;
  --editorial-visual-caption-h: 48px;
  --editorial-toggle-h: 54px;
}

.editorial__copy{
  grid-area: copy;
  display: grid;
  /*
   * Desktop rhythm:
   * - thesis aligns with the top of the visual frame
   * - summary is centered between thesis and toggle
   * - toggle starts where the visual caption ends
   */
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  min-width: 0;
  max-width: 720px;
  min-height: calc(var(--editorial-visual-frame-h) + var(--editorial-visual-caption-gap) + var(--editorial-visual-caption-h) + var(--editorial-toggle-h));
}

.editorial__thesis-wrap{
  grid-row: 1;
  min-width: 0;
  max-width: 720px;
  align-self: start;
}

.editorial__eyebrow{
  margin-bottom: 16px;
  color: var(--sem-cta, #ff6a00);
  font-size: clamp(0.92rem, 0.84rem + 0.24vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.editorial__heading{
  max-width: 1180px;
  margin: 0;
  color: var(--sem-navy, #1e2f4a);
  font-size: clamp(1.85rem, 1.38rem + 1.55vw, 3.25rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.editorial__thesis{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 0;
  padding: 12px 18px;
  border: 1px solid rgba(31,104,78,0.14);
  border-radius: var(--sem-radius-control, 18px);
  background: #edf8f2;
  color: #1f684e;
  font-weight: 750;
  line-height: 1.35;
}

.editorial__thesis-icon{
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.editorial__thesis-icon::before,
.editorial__thesis-icon::after{
  content: "";
  position: absolute;
  border-radius: 999px;
}

.editorial__thesis-icon::before{
  inset: 2px;
  border: 2px solid currentColor;
}

.editorial__thesis-icon::after{
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--sem-cta, #ff6a00);
  transform: translate(-50%, -50%);
}

.editorial__summary{
  grid-row: 3;
  align-self: center;
  max-width: 720px;
  margin: 0;
  color: var(--sem-text-soft, rgba(30,47,74,0.78));
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.14rem);
  line-height: 1.54;
}

.editorial__summary > *:last-child{
  margin-bottom: 0;
}

.editorial__toggle{
  grid-row: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  align-self: end;
  justify-self: start;
  margin-top: 0;
  min-height: var(--editorial-toggle-h, 54px);
  padding: 15px 24px;
  border: 1px solid rgba(30,47,74,0.18);
  border-radius: var(--sem-radius-pill, 999px) !important;
  background: #fff;
  box-shadow: var(--sem-shadow-sm, 0 8px 22px rgba(30,47,74,0.06));
  color: var(--sem-navy, #1e2f4a);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.editorial__toggle:hover,
.editorial__toggle:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(30,47,74,0.28);
  background: #fff;
  box-shadow: 0 12px 26px rgba(30,47,74,0.12);
  outline: none;
}

.editorial__toggle-icon{
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.editorial__toggle-icon::before,
.editorial__toggle-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--sem-cta, #ff6a00);
  transform: translate(-50%, -50%);
  transition: transform .22s ease, opacity .22s ease;
}

.editorial__toggle-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.editorial.is-expanded .editorial__toggle-icon::after{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.editorial__visual{
  grid-area: visual;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin: 0;
  justify-self: end;
  align-self: start;
}

.editorial__visual-frame{
  overflow: hidden;
  height: var(--editorial-visual-frame-h);
  border: 1px solid rgba(30,47,74,0.10);
  border-radius: 24px;
  background: #eef7fb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.editorial__image,
.editorial__diagram{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editorial__visual-caption{
  max-width: 92%;
  min-height: var(--editorial-visual-caption-h);
  margin-top: var(--editorial-visual-caption-gap);
  color: rgba(30,47,74,0.64);
  font-size: 0.95rem;
  line-height: 1.4;
}

.editorial__diagram-bg{
  fill: #eef7fb;
  stroke: rgba(30,47,74,0.10);
  stroke-width: 2;
}

.editorial__diagram-label{
  fill: var(--sem-navy, #1e2f4a);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
}

.editorial__diagram-label--bottom{
  fill: #1f684e;
}

.editorial__diagram-source circle,
.editorial__diagram-target circle{
  fill: #fff;
  stroke: rgba(30,47,74,0.16);
  stroke-width: 2;
}

.editorial__diagram-source text,
.editorial__diagram-target text{
  fill: var(--sem-navy, #1e2f4a);
  font-size: 13px;
  font-weight: 750;
}

.editorial__diagram-lines path{
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editorial__diagram-lines--source path{
  stroke: rgba(30,47,74,0.34);
  stroke-dasharray: 4 6;
}

.editorial__diagram-lines--target path{
  stroke: #1f684e;
}

.editorial__diagram-core circle{
  fill: var(--sem-navy, #1e2f4a);
}

.editorial__diagram-core path{
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

.editorial__diagram-core text{
  fill: var(--sem-navy, #1e2f4a);
  font-size: 16px;
  font-weight: 850;
}

.editorial__details{
  margin-top: clamp(30px, 3.5vw, 48px);
  padding-top: clamp(30px, 3.5vw, 46px);
  border-top: 1px solid rgba(30,47,74,0.10);
}

.editorial__details[hidden]{
  display: none !important;
}

.editorial__details-inner{
  max-width: 900px;
  margin-inline: auto;
  color: var(--sem-text-soft, rgba(30,47,74,0.78));
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
  line-height: 1.68;
}

.editorial__details-inner > *{
  margin-top: 0;
  margin-bottom: 1.15em;
}

.editorial__details-inner > h2,
.editorial__details-inner > h3{
  color: var(--sem-navy, #1e2f4a);
  line-height: 1.16;
}

.editorial__details-inner > h2{
  margin-bottom: 0.8em;
  font-size: clamp(1.65rem, 1.32rem + 1vw, 2.5rem);
}

.editorial__details-inner > h3{
  font-size: clamp(1.28rem, 1.1rem + .55vw, 1.7rem);
}

.editorial__details-inner > blockquote,
.editorial__details-inner > .editorial-callout{
  margin: clamp(28px, 3vw, 42px) 0 0;
  padding: 20px 26px;
  border: 1px solid rgba(126,200,244,0.34);
  border-radius: 22px;
  background: #eef7fb;
  color: var(--sem-navy, #1e2f4a);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
}

.editorial--green .editorial__visual-frame,
.editorial--green .editorial__details-inner > blockquote,
.editorial--green .editorial__details-inner > .editorial-callout{
  background: #edf8f2;
}

.editorial--blue .editorial__visual-frame,
.editorial--blue .editorial__details-inner > blockquote,
.editorial--blue .editorial__details-inner > .editorial-callout{
  background: #eef7fb;
}

.editorial--navy .editorial__panel{
  background: linear-gradient(135deg, #102843 0%, #1e2f4a 100%);
  color: #fff;
}

.editorial--navy .editorial__heading,
.editorial--navy .editorial__summary,
.editorial--navy .editorial__details-inner,
.editorial--navy .editorial__details-inner > h2,
.editorial--navy .editorial__details-inner > h3{
  color: #fff;
}

.editorial--navy .editorial__details{
  border-top-color: rgba(255,255,255,0.16);
}

@media (max-width: 1199.98px){
  .editorial > .container{
    width: min(1120px, calc(100% - clamp(28px, 6vw, 80px)));
  }

  .editorial__body{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "visual";
    row-gap: 26px;
    align-items: start;
  }

  .editorial__copy{
    display: grid;
    grid-template-rows: none;
    row-gap: 22px;
    height: auto;
    max-width: 760px;
    justify-self: start;
  }

  .editorial__thesis-wrap,
  .editorial__summary,
  .editorial__toggle,
  .editorial__visual{
    grid-row: auto;
    max-width: 760px;
    justify-self: start;
  }

  .editorial__summary{
    margin: 0;
  }

  .editorial__visual-frame{
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .editorial__image,
  .editorial__diagram{
    height: auto;
  }

}

@media (max-width: 767.98px){
  .editorial{
    overflow: visible;
  }

  .editorial > .container{
    width: min(100%, calc(100% - 28px));
  }

  .editorial__panel{
    overflow: visible;
    padding: 26px 22px;
    border-radius: 24px;
  }

  .editorial__accent{
    top: 26px;
    bottom: 26px;
    left: 20px;
    width: 5px;
  }

  .editorial__teaser{
    gap: 24px;
    padding-left: 22px;
  }

  .editorial__body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "thesis"
      "visual"
      "summary"
      "toggle";
    row-gap: 22px;
  }

  .editorial__copy{
    display: contents;
  }

  .editorial__thesis-wrap{
    grid-area: thesis;
    max-width: none;
  }

  .editorial__visual{
    grid-area: visual;
    justify-self: stretch;
  }

  .editorial__summary{
    grid-area: summary;
  }

  .editorial__toggle{
    grid-area: toggle;
  }

  .editorial__heading{
    font-size: clamp(1.55rem, 1.22rem + 1.45vw, 1.95rem);
    font-weight: 650;
    line-height: 1.16;
  }

  .editorial__thesis{
    display: flex;
    padding: 11px 14px;
    font-size: 0.95rem;
  }

  .editorial__visual{
    width: 100%;
    max-width: none;
  }

  .editorial__visual-caption{
    max-width: none;
  }

  .editorial__summary{
    width: 100%;
    max-width: none;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.56;
  }

  .editorial__toggle{
    width: 100%;
  }

  .editorial__details{
    margin-left: 22px;
    width: calc(100% - 22px);
    box-sizing: border-box;
    overflow: visible;
  }

  .editorial__details-inner{
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 1rem;
    line-height: 1.62;
  }
}

/* ========================================================================== 
   Editorial eyebrow underline
   ========================================================================== */

.editorial__eyebrow{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  color: #ff6a00;
}

.editorial__eyebrow::after{
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 9px;
  border-radius: 999px;
  background: #ff6a00;
}

/* ========================================================================== 
   Editorial eyebrow final fix: full-width underline only
   ========================================================================== */

.editorial__header .editorial__eyebrow.section-eyebrow{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  color: #ff6a00;
}

.editorial__header .editorial__eyebrow.section-eyebrow::after{
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 9px;
  margin-left: 0;
  border-radius: 999px;
  background: #ff6a00;
}

/* ========================================================================== 
   Editorial without left accent line
   ========================================================================== */

.editorial__accent{
  display: none !important;
}

.editorial__teaser{
  padding-left: 0;
}

@media (max-width: 767.98px){
  .editorial__teaser{
    padding-left: 0;
  }

  .editorial__details{
    margin-left: 0;
    width: 100%;
  }
}