/*
  Hala Elkholy Portfolio — rebuilt tablet/mobile layout

  Add this file AFTER the current <style> block:
  <link rel="stylesheet" href="resources/css/home-responsive.css">

  Desktop rules remain unchanged.
*/

/*
  The desktop artwork in brand.png has a large transparent canvas, which made
  the visible mark look tiny. Use the already-cropped compact mark everywhere
  and prevent the navigation layout from shrinking it.
*/
@media (min-width: 951px) {
  .brand-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .brand-logo img {
    content: url("../images/brands.png");
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    object-fit: contain;
  }
}

@media (max-width: 950px) {
  :root {
    /* About 1 cm shorter than the previous mobile hero. */
    --mobile-hero-height: 332px;
    --mobile-side: clamp(16px, 5vw, 30px);
    --mobile-identity-bg: #f4f4f4;
  }

  html,
  body,
  .page {
    background: #08090d;
  }

  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: auto;
  }

  .page {
    min-height: 100vh;
    overflow: visible;
  }

  /* The camera remains fixed, but is visible only through the short hero. */
  .fixed-camera-bg {
    position: fixed;
    inset: 0;
    height: 100vh;
    background: #020202;
  }

  .fixed-camera-bg::before,
  .fixed-camera-bg::after {
    top: 70px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(var(--mobile-hero-height) - 70px);
    background-image: url("../images/bgtxts.jpg");
    background-position: center 12px;
    background-size: 310px 200px;
    background-repeat: no-repeat;
  }

  .fixed-camera-bg::after {
    background-image: url("../images/bgtxts.jpg");
    background-size: 310px 200px;
    background-position: center 12px;
    background-repeat: no-repeat;
    animation-delay: 0.6s;
  }

  .hero-section,
  .layout-grid {
    min-height: 0;
  }

  .layout-grid {
    display: block;
    height: var(--mobile-hero-height);
    background: transparent;
  }

  .div1,
  .div4,
  .div5 {
    display: none;
  }

  .div2 {
    position: relative;
    height: 70px;
    padding: 0 var(--mobile-side);
    background: rgba(2, 2, 2, 0.94);
  }

  .div3 {
    display: block;
    min-height: calc(var(--mobile-hero-height) - 70px);
    background: transparent;
  }

  .nav-wrap {
    height: 70px;
    padding-left: 54px;
  }

  .brand-logo {
    left: 18px;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: visible;
    border-radius: 50%;
    z-index: 30;
  }

  .brand-logo img {
    /* Use the compact artwork on tablet/mobile only. */
    content: url("../images/brands.png");
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-links {
    gap: clamp(14px, 4vw, 28px);
    font-size: clamp(0.78rem, 2.5vw, 0.92rem);
  }

  .language-selector {
    top: 7px;
    right: var(--mobile-side);
    padding-left: 10px;
    font-size: 0.68rem;
  }

  /* Real document flow replaces the old -800px positioning trick. */
  .floating-layer {
    position: relative;
    inset: auto;
    z-index: 4;
    min-height: 0;
    margin-top: calc(-1 * var(--mobile-hero-height));
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    pointer-events: none;
  }

  .floating,
  .glass,
  .identity-card {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .welcome {
    order: 1;
    width: 100% !important;
    height: calc(var(--mobile-hero-height) - 105px);
    margin: 0;
    /* Sit lower and farther left, beside the raised portrait. */
    padding: 114px calc(50% + 30px) 0 var(--mobile-side);
    color: #fff;
    font-size: clamp(1.85rem, 7.6vw, 2.65rem);
    line-height: 0.95;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    pointer-events: none;
    /* Keep the word anchored just left of the centred portrait. */
    transform: translateY(-10px) !important;
  }

  .photo-frame {
    order: 2;
    z-index: 12;
    align-self: center;
    flex: 0 0 auto;
    width: 190px !important;
    height: 190px !important;
    margin: -95px 0 -95px;
    padding: 2px;
    /* Lift the portrait about 1 cm and place it over the job title. */
    transform: translate(82px, -48px) !important;
  }

  /* Grey identity band: portrait crosses its upper edge by exactly half. */
  .identity-card {
    order: 3;
    z-index: 5;
    width: 100% !important;
    max-width: none;
    margin: 0;
    /* Extra lower room keeps the final role line clear of the overlapping
       skills card on every mobile width. */
    padding: 14px var(--mobile-side) 44px;
    background: var(--mobile-identity-bg);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(120px, 0.85fr);
    align-items: end;
    gap: 18px;
  }

  /* The grey continuation is sized by the skills card itself below. */
  .identity-card::after {
    content: none;
    display: none;
  }

  .identity-card h1 {
    margin: 0;
    font-size: clamp(2.8rem, 13vw, 4.4rem);
    line-height: 0.88;
  }

  .identity-card .role {
    padding-bottom: 2px;
    font-size: clamp(0.72rem, 3.2vw, 0.92rem);
    line-height: 1.45;
  }

  .skills-card {
    order: 4;
    z-index: 8;
    width: calc(100% - (2 * var(--mobile-side))) !important;
    max-width: 680px;
    margin: -18px auto 0;
    padding: clamp(22px, 6vw, 30px);
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 16px;
    overflow: visible;
    border-radius: 24px;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
    flex: 0 0 auto;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 11px 26px rgba(22, 25, 34, 0.15),
      0 2px 7px rgba(22, 25, 34, 0.07);
    font-family: ui-rounded, "Arial Rounded MT Bold", "Segoe UI", sans-serif;
    font-weight: 400;
  }

  /* White card plus a grey band whose height follows the real card height. */
  .skills-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 0;
    top: -18px;
    right: calc(-1 * var(--mobile-side));
    bottom: -20px;
    left: calc(-1 * var(--mobile-side));
    background: var(--mobile-identity-bg);
    pointer-events: none;
  }

  .skills-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 1;
    inset: 0;
    padding: 0;
    border-radius: inherit;
    background: #fff;
    -webkit-mask: none;
    mask: none;
    pointer-events: none;
  }

  .skills-card > * {
    position: relative;
    z-index: 1;
  }

  .skills-card h3,
  .skill-title {
    letter-spacing: -0.015em;
  }

  .skills-card h3 {
    font-weight: 650;
  }

  .skill-title {
    font-weight: 600;
  }

  .skill-desc {
    font-family: ui-rounded, "Segoe UI", sans-serif;
    font-weight: 400;
  }

  .badges {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .badge {
    width: 90px;
    height: 90px;
  }

  .intro-card {
    order: 5;
    z-index: 4;
    width: calc(100% - (2 * var(--mobile-side))) !important;
    max-width: 680px;
    /*
      The grey skills backdrop extends 20px below the white card.
      Keep the black intro safely below that painted overflow on every
      viewport, instead of letting the higher skills stacking layer cover it.
    */
    margin: 48px auto 16px;
    padding: clamp(22px, 5vw, 30px);
    border: 1px solid rgba(174, 178, 188, 0.32);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: ui-rounded, "Segoe UI", sans-serif;
  }

  .intro-card::before {
    display: none !important;
    content: none !important;
  }

  .intro-card p,
  .intro-card li {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .intro-card ul {
    max-width: 680px;
  }

  .cta {
    margin-top: 12px;
  }

  .opening-curtain {
    display: none;
  }

  .bottom-gradient {
    height: 18px;
    background: linear-gradient(90deg, var(--left-bottom), var(--right-bottom));
  }

  .div4,
  .div5,
  .photo-frame,
  .identity-card,
  .intro-card,
  .skills-card,
  .welcome {
    opacity: 1;
    clip-path: none;
    animation: none;
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-hero-height: 312px;
  }

  .div2 {
    min-height: 70px;
    padding: 0 14px;
  }

  .brand-logo {
    left: 18px;
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .brand-logo img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .nav-wrap {
    flex-wrap: nowrap;
    padding-left: 76px;
  }

  .nav-links {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .language-selector {
    right: 14px;
  }

  .welcome {
    height: calc(var(--mobile-hero-height) - 98px);
    padding-top: 109px;
    padding-right: calc(50% + 30px);
    transform: translateY(-10px) !important;
  }

  .photo-frame {
    width: 176px !important;
    height: 176px !important;
    margin: -88px 0 -88px;
    transform: translate(72px, -48px) !important;
  }

  .identity-card {
    padding-top: 12px;
    grid-template-columns: minmax(0, 1.08fr) minmax(112px, 0.92fr);
    gap: 12px;
  }

  .skills-card {
    grid-template-columns: minmax(0, 1fr) 72px;
    padding: 22px 18px;
  }

  .skills-card h3 {
    font-size: 1rem;
  }

  .skill-title {
    font-size: 0.94rem;
  }

  .skill-desc {
    font-size: 0.85rem;
    line-height: 1.48;
  }

  .badge {
    width: 90px;
    height: 90px;
    border-radius: 17px;
    font-size: 0.58rem;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/*
  Narrow portrait phones need the identity copy in normal vertical flow.
  The self-hosted display font has stable metrics across desktop and Android.
*/
@media (max-width: 520px) {
  .identity-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding-top: 52px;
  }

  .identity-card h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.5vw, 3.15rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.045em;
    overflow-wrap: normal;
  }

  .identity-card .role {
    padding-top: 0;
    font-size: clamp(0.8rem, 3.2vw, 0.92rem);
    line-height: 1.45;
  }
}

/* Keep every navigation link visible without forcing horizontal overflow. */
@media (max-width: 430px) {
  .nav-wrap {
    padding-left: 64px;
    padding-right: 4px;
  }

  .nav-links {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 5px 12px;
    margin-top: 10px;
    font-size: clamp(0.68rem, 3vw, 0.78rem);
    line-height: 1.15;
  }
}

/*
  Very short landscape phones have enough width, but too little height for the
  normal portrait composition. Pull the identity band upward and compact only
  the name/role; the skills and certificates continue naturally below it.
*/
@media (max-width: 950px) and (max-height: 390px) and (orientation: landscape) {
  :root {
    /* Do not squeeze the whole composition into the shallow viewport.
       The rest of the page is intentionally reached by vertical scrolling. */
    --mobile-hero-height: 312px;
  }

  .identity-card {
    /* Keep the tested 150px as content height. The global reset uses
       border-box, which otherwise subtracts the 18px/50px padding and leaves
       only 82px for two name lines. */
    box-sizing: content-box !important;
    height: 150px !important;
    min-height: 150px !important;
    flex: 0 0 auto !important;
    padding-top: 18px !important;
    padding-bottom: 50px !important;
    align-items: start;
  }

  .identity-card h1 {
    font-size: clamp(2.45rem, 8vw, 3.1rem);
    /* Anton extends slightly below a very tight .9 line box, which clipped
       the bottom of ELKHOLY even though the card still had free padding. */
    line-height: 1;
  }

  .identity-card .role {
    font-size: clamp(0.72rem, 1.8vw, 0.86rem);
    line-height: 1.4;
    /* Reserve real layout space above the title. A transform only repaints
       the text and proved unreliable beside the overlapping portrait. */
    padding-top: 48px !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  /*
    In the normal mobile composition the skills backdrop intentionally rises
    above its white card. On a short landscape viewport that higher stacking
    layer covered the last line of the name/role. Keep the cards contiguous,
    but start the skills paint only after the identity content has finished.
  */
  .skills-card,
  .floating-layer .skills-card.glass.glass-light {
    margin-top: 0;
  }

  .skills-card::after,
  .floating-layer .skills-card.glass.glass-light::after {
    top: 0 !important;
  }
}

/*
  Final mobile-only glass overrides.
  Keep the glass classes in the HTML for desktop, but replace their painted
  layers on smaller screens.  These selectors intentionally outrank the
  desktop .glass/.glass-light rules.
*/
@media (max-width: 950px) {
  .floating-layer .skills-card.glass.glass-light {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 24px !important;
    box-shadow:
      0 13px 30px rgba(22, 25, 34, 0.18),
      0 3px 8px rgba(22, 25, 34, 0.08) !important;
  }

  .floating-layer .skills-card.glass.glass-light::before {
    content: "" !important;
    display: block !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  .floating-layer .skills-card.glass.glass-light::after {
    content: "" !important;
    display: block !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  .floating-layer .skills-card.glass.glass-light > * {
    position: relative;
    z-index: 2 !important;
  }

  .floating-layer .intro-card.glass.glass-dark {
    background: rgba(255, 255, 255, 0.045) !important;
    background-color: rgba(255, 255, 255, 0.045) !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  .floating-layer .intro-card.glass.glass-dark::before,
  .floating-layer .intro-card.glass.glass-dark::after {
    content: none !important;
    display: none !important;
  }

}

/*
  On tablets the desktop page may still have a constrained max-width.  Let the
  grey skills backdrop reach the viewport edges, while the white card keeps
  its comfortable content width.
*/
@media (min-width: 641px) and (max-width: 950px) {
  .skills-card::after,
  .floating-layer .skills-card.glass.glass-light::after {
    right: auto !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
  }
}

/*
  Keep the compact 667–720px layout unchanged. On taller screens the grey
  backdrop is shortened slightly, but still leaves a neat lower rim.
*/
@media (max-width: 950px) and (min-height: 721px) {
  .skills-card::after,
  .floating-layer .skills-card.glass.glass-light::after {
    bottom: -17px !important;
  }
}

@media (max-width: 370px) {
  .identity-card {
    align-items: start;
  }

  .identity-card .role {
    padding-top: 8px;
  }

  .skills-card {
    grid-template-columns: 1fr;
  }

  .badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/*
  Very narrow and short phones (for example Galaxy S8 at 360 x 740):
  show the full-size badges first so they remain visible without an initial
  scroll. Taller narrow phones keep the badges below the text.
*/
@media (max-width: 370px) and (max-height: 800px) {
  .skills-card {
    padding: 16px 14px;
  }

  .skills-card h3 {
    margin-bottom: 10px;
  }

  .skill-block {
    padding: 9px 0;
  }

  .skill-title {
    margin-bottom: 2px;
  }

  .skill-desc {
    line-height: 1.34;
  }

  .badges {
    order: -1;
    gap: 4px;
    justify-content: space-between;
    width: 100%;
  }

  .badge {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
  }
}

/*
  Galaxy Z Fold 5 cover screen (344 x 882): keep all three badges on one
  readable row. The Galaxy S8 rule above remains unchanged at 90 x 90px.
*/
@media (max-width: 350px) and (min-height: 801px) {
  .badges {
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }

  .badge {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
  }
}