/* Ehopto Public Hub · deliberate alignment
 * Media/identity: one balanced hero; About: one reading axis.
 * Does not touch the person cover/avatar chassis or the Website editor. */

/* 1. A media Hub is one feature, not an image placed beside a detached
   sentence. Preserve the authentic image, attribution and existing actions. */
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) {
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  gap:0!important;
  align-items:stretch!important;
  padding:0!important;
  margin:clamp(10px,1.5vw,18px) 0 0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:var(--hm-surface,#0c182a);
  box-shadow:none!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-visual-wrap {
  min-width:0!important;
  min-height:0!important;
  height:100%;
  align-self:stretch;
  margin:0!important;
  padding:0!important;
  gap:0!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-visual-wrap > .hm-visual {
  width:100%!important;
  min-height:clamp(270px,27vw,355px)!important;
  max-height:380px!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-visual :is(.hm-visual-foreground,.hm-visual-backdrop) {
  min-height:0!important;
  max-height:none!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-main {
  grid-column:2!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center!important;
  align-items:stretch;
  align-self:stretch!important;
  min-width:0!important;
  margin:0!important;
  padding:clamp(22px,3vw,42px)!important;
  border-left:1px solid color-mix(in srgb,var(--hm-line,#34516c) 58%,transparent);
  background:linear-gradient(140deg,rgba(37,84,135,.075),transparent 70%);
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-main .hm-heading-copy {
  display:grid;
  gap:clamp(8px,1.1vw,14px);
  width:100%;
  max-width:48ch;
  min-width:0;
  margin:0;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-kickers {
  margin:0 0 14px!important;
  gap:9px!important;
  align-items:center;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-title {
  margin:0!important;
  line-height:1.08!important;
  font-size:clamp(31px,3.5vw,49px)!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-summary {
  margin:0!important;
  max-width:52ch!important;
  font-size:clamp(13px,1.15vw,16px)!important;
  line-height:1.55!important;
}

/* 2. About owns a predictable reading width, regardless of the presence
   of the public sidebar. Align the title, content and subsequent sections. */
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-overview-extras {
  width:100%;
  min-width:0;
  margin:0!important;
  padding:0!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview {
  width:100%!important;
  min-width:0;
  max-width:none!important;
  padding:clamp(16px,2.3vw,28px) 0 clamp(20px,2.8vw,32px)!important;
  margin:0!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insights-head {
  display:grid;
  justify-items:start;
  width:min(100%,860px)!important;
  min-width:0;
  max-width:860px!important;
  margin:0 auto clamp(13px,1.6vw,20px)!important;
  padding:0!important;
  text-align:left!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insights-head h2 {
  margin:0!important;
  font-size:clamp(23px,2.4vw,31px)!important;
  line-height:1.16;
  letter-spacing:-.035em;
  text-wrap:balance;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insight-grid {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:min(100%,860px)!important;
  min-width:0;
  max-width:860px!important;
  gap:clamp(12px,1.6vw,18px)!important;
  margin:0 auto!important;
  padding:0!important;
  align-items:stretch;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview
.hm-overview-insight-grid:has(> .hm-overview-insight-panel:only-child) {
  grid-template-columns:minmax(0,1fr)!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insight-panel {
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(17px,2vw,23px)!important;
  box-shadow:none!important;
  border:1px solid var(--hm-line,#28415c);
  border-radius:13px!important;
  background:var(--hm-surface,#101f33);
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview
.hm-overview-insight-grid:has(> .hm-overview-insight-panel:only-child)
> .hm-overview-insight-panel.is-summary-only {
  min-height:0!important;
  padding:4px 0 4px clamp(16px,1.7vw,24px)!important;
  border:0!important;
  border-left:2px solid var(--hm-blue,#76bdea)!important;
  border-radius:0!important;
  background:transparent!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-summary-lede {
  margin:0!important;
  font-size:clamp(16px,1.55vw,19px)!important;
  font-weight:450;
  line-height:1.62!important;
  color:var(--hm-muted,#c0d2e5);
  max-width:65ch;
  overflow-wrap:anywhere;
}

/* The old grid reserved too much breathing room before the shared
   Discover shelf when only About is present. Let content decide its height. */
html[data-hub-storefront] body
.hub-market[data-hub-public-ready][data-hub-public-view="overview"]
.ehub-public-layout:not(:has(> .ehub-side)) {
  min-height:0!important;
  margin-bottom:clamp(6px,1vw,12px)!important;
}
html[data-hub-storefront] body
.hub-market[data-hub-public-view] .ehub-public-main:has(.ehub-factual-overview) {
  min-height:0!important;
  gap:clamp(9px,1.2vw,15px)!important;
}

/* 3. Keep the same editorial alignment when the screen is narrow.
   Real photo is above the identity; About stays on a single reading axis. */
@media(max-width:820px) {
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    overflow:hidden!important;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-visual-wrap,
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-main {
    grid-column:1!important;
    width:100%!important;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-visual-wrap > .hm-visual {
    min-height:0!important;
    max-height:360px!important;
    height:auto!important;
    aspect-ratio:16/9;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) > .hm-main {
    padding:clamp(18px,4vw,27px)!important;
    border-left:0;
    border-top:1px solid var(--hm-line,#28415c);
    background:transparent;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insight-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@media(max-width:520px) {
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) {
    border-radius:14px!important;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-title {
    font-size:clamp(27px,7vw,36px)!important;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] .ehub-factual-overview {
    padding:15px 0 24px!important;
  }
  html[data-hub-storefront] body
  .hub-market[data-hub-public-view] .ehub-factual-overview .hm-overview-insight-panel {
    padding:16px!important;
  }
}