/* P303: faithful small-screen portrait composition based on GAS_Backup.zip / Portfolio.html.
   Intentionally scoped to the personal hero and small-screen header only.
   Other panels keep their P302 widths, grid, colors and functions. */

/* Desktop: center ONLY the identity + portrait vertically in the 16:3 cover.
   Existing horizontal alignment and all document sections are unchanged. */
@media (min-width: 681px) {
  body.e3-portfolio-fulltheme main.e3-profile-page .e3-cover-wide > .e3-hero-identity {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide > .e3-hero-identity > .e3-identity-copy {
    background: rgba(2, 31, 26, .46) !important;
  }
}

@media (max-width: 680px) {
  /* The cover is a photograph first; the personal card sits over its lower edge.
     GAS reference: .hero-section + .profile-wrap/.profile-card. */
  body.e3-portfolio-fulltheme main.e3-profile-page {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding-top: 0 !important;
  }
  body.e3-portfolio-fulltheme main.e3-profile-page section.e3-cover-wide {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 196px 0 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide > .e3-cover-art {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 255px !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-hero-fiscal {
    position: absolute !important;
    z-index: 4 !important;
    top: 12px !important;
    left: 14px !important;
    right: auto !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  /* Reconstruct the original GAS card on mobile: avatar stacked above details.
     No horizontal half-width panel, no dark overlay box beside the portrait. */
  body.e3-portfolio-fulltheme main.e3-profile-page .e3-cover-wide > .e3-hero-identity {
    position: relative !important;
    z-index: 6 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 98px 20px 28px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 19px 44px rgba(27, 44, 58, .17) !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-profile-photo {
    position: absolute !important;
    z-index: 7 !important;
    top: -53px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    order: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    width: 148px !important;
    height: 148px !important;
    min-width: 148px !important;
    max-width: none !important;
    margin: 0 !important;
    border: 6px solid #fff !important;
    border-radius: 50% !important;
    outline: 2px dashed var(--e3-accent, #1682b4) !important;
    outline-offset: 5px !important;
    background: #dceef8 !important;
    box-shadow: 0 9px 22px rgba(9, 31, 43, .16) !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide > .e3-hero-identity > .e3-identity-copy {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    box-sizing: border-box !important;
    order: 1 !important;
    flex: none !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #192d3f !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-profile-tag {display: none !important;}
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy h1 {
    margin: 6px 0 11px !important;
    color: #192d3f !important;
    font-size: clamp(24px, 7vw, 34px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy p {
    margin: 2px 0 6px !important;
    color: #627389 !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy .e3-welcome {
    margin: 17px 0 14px !important;
    padding: 12px 12px !important;
    background: #f3f7fa !important;
    color: #22384c !important;
    border: 0 !important;
    border-top: 3px solid var(--e3-accent, #1682b4) !important;
    border-radius: 0 0 12px 12px !important;
    font-style: italic !important;
    text-align: center !important;
    text-shadow: none !important;
  }
  /* The evidence block follows the complete personal card, never overlaps it. */
  body.e3-portfolio-fulltheme main.e3-profile-page #evidence {
    position: relative !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 8px auto 0 !important;
  }
  /* GAS-style compact one-row header. Preserve the app's existing functions. */
  body.e3-portfolio-fulltheme .e3-header-inner {
    grid-template-columns: minmax(0, 1fr) auto 38px !important;
    grid-template-rows: 1fr !important;
    gap: 6px !important;
    padding: 7px 10px !important;
    min-height: 58px !important;
  }
  body.e3-portfolio-fulltheme .e3-mobile-menu {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    grid-row: 1 !important;
    grid-column: 3 !important;
    justify-self: end !important;
  }
  body.e3-portfolio-fulltheme .e3-mobile-menu > summary {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  body.e3-portfolio-fulltheme .e3-brand strong {font-size: 13px !important;}
  body.e3-portfolio-fulltheme .e3-brand small {max-width: 116px !important;}
  body.e3-portfolio-fulltheme .e3-person-actions {gap: 5px !important;}
  body.e3-portfolio-fulltheme .e3-mode-toggle,
  body.e3-portfolio-fulltheme .e3-home-link,
  body.e3-portfolio-fulltheme .e3-person-year-archive summary {
    border-radius: 50% !important;
  }
  body.e3-portfolio-fulltheme .e3-mobile-menu .e3-mobile-nav {
    top: calc(100% + 11px) !important;
    left: auto !important;
    right: 0 !important;
    width: min(292px, calc(100vw - 24px)) !important;
    max-width: none !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(10, 30, 35, .17) !important;
  }
}

@media (max-width: 370px) {
  body.e3-portfolio-fulltheme main.e3-profile-page .e3-cover-wide > .e3-hero-identity {
    width: calc(100% - 24px) !important;
    padding-inline: 16px !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-profile-photo {
    width: 135px !important;
    height: 135px !important;
    min-width: 135px !important;
  }
  body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy h1 {font-size: 24px !important;}
}

/* Dark mode keeps GAS-like stacked card composition with readable text. */
@media (max-width: 680px) {
  html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e3-cover-wide > .e3-hero-identity {
    background: #172735 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34) !important;
  }
  html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy h1 {color: #edf6fd !important;}
  html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy p {color: #b4c7d5 !important;}
  html[data-e3-display-mode="dark"] body.e3-portfolio-fulltheme .e3-cover-wide .e3-identity-copy .e3-welcome {
    background: #263b4b !important;
    color: #f0f6fb !important;
  }
}

/* Stop the older full-hero background image from painting a second copy beneath
   the mobile banner; the dedicated .e3-cover-art is its only image surface. */
@media (max-width: 680px) {
  body.e3-portfolio-fulltheme main.e3-profile-page section.e3-design-hero.e3-has-cover {
    background-image: none !important;
    background-color: transparent !important;
  }
  body.e3-portfolio-fulltheme main.e3-profile-page section.e3-design-hero::before,
  body.e3-portfolio-fulltheme main.e3-profile-page section.e3-design-hero::after {
    display: none !important;
    content: none !important;
  }
}