/* ==================================================
               Mehdi Dimyadi Portfolio
   ================================================== */

:root { --header-h: 56px; }

/* ---------- Hero Section ---------- */
#hero {
    height: calc(var(--vh, 1vh) * 100);          /* Legacy browsers */
    min-height: 0;
    padding-block: calc(var(--header-h) + 1rem) 3.7rem;   /* Prevent avatar ring from being obscured by the header */
    padding-inline: max(clamp(.9rem, 3vw, 1.4rem), env(safe-area-inset-left), env(safe-area-inset-right));
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}
@supports (height: 100svh) {
    #hero { height: 100svh; }
}

/* ---------- محتوا ---------- */
#hero .hero-content {
    --av: clamp(104px, min(23svh, 54vw), 280px);   /* Avatar */
    --md: clamp(128px, min(28svh, 62vw), 280px);   /* Poetry medallion */
    padding: 0;
    gap: clamp(.35rem, 1.5svh, 1rem);
    max-width: 100%;
    transform: scale(var(--fit, 1));
    transform-origin: center center;
}
#hero #hero-avatar,
#hero .loading-ring { width: var(--av); height: var(--av); }

#hero #hero-title {
    font-size: clamp(1.35rem, 3.6svh, 2.7rem);
    line-height: 1.2;
}
#hero .hero-roles {
    margin-top: 0;
    min-height: 1.5em;
    max-width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(.74rem, min(2.1svh, 3.5vw), 1.25rem);
}
#hero #hero-subtitle {
    font-size: clamp(.74rem, min(1.9svh, 3.7vw), 1.15rem);
    line-height: 1.65;
    padding: clamp(.45rem, 1.4svh, 1rem) clamp(.7rem, 2vw, 1.2rem);
    margin: 0;
}
#hero .hero-layout {
    margin-top: 0;
    gap: clamp(.6rem, 2svh, 1.4rem);
    align-items: center;
    max-width: 100%;
}
#hero .saadi-medallion { width: var(--md); flex: none; }

/* ---------- Down arrow: Always visible ---------- */
#hero .scroll-down {
    display: grid;
    bottom: max(.7rem, env(safe-area-inset-bottom));
    left: 50%;
    margin-left: -22px;          /* Centering without interfering with the bounce animation's transform */
    width: 44px;
    height: 44px;
    z-index: 6;
}

/* ---------- Portrait Phone/Tablet: Text at top, medallion at bottom ---------- */
@media (max-width: 768px) and (orientation: portrait) {
    #hero .hero-layout { flex-direction: column; }
    #hero #hero-subtitle { width: 100%; max-width: 34rem; text-align: justify; }
}

/* ---------- Larger widths (landscape tablets and desktops) ---------- */
@media (min-width: 769px) {
    #hero .hero-layout { flex-direction: row; }
    #hero #hero-subtitle { max-width: min(34rem, 56vw); }
}

/* ---------- Landscape Mobile/Laptop: Two columns (Avatar | Name, text, and medallion) ---------- */
@media (orientation: landscape) and (max-height: 620px) {
    #hero .hero-content {
        --av: clamp(96px, min(54svh, 26vw), 220px);
        --md: clamp(100px, min(40svh, 22vw), 190px);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "av title"
            "av roles"
            "av layout";
        column-gap: clamp(1rem, 4vw, 2.4rem);
        row-gap: clamp(.25rem, 1.2svh, .6rem);
        align-items: center;
        justify-items: center;
        width: min(100%, 60rem);
    }
    #hero .hero-content > #avatar-container { grid-area: av; }
    #hero .hero-content > #hero-title       { grid-area: title; }
    #hero .hero-content > .hero-roles       { grid-area: roles; }
    #hero .hero-content > .hero-layout      { grid-area: layout; flex-direction: row; width: 100%; }
    #hero #hero-title { font-size: clamp(1.1rem, 5.2svh, 1.9rem); }
    #hero #hero-subtitle {
        font-size: clamp(.66rem, 3.3svh, .95rem);
        line-height: 1.5;
        max-width: none;
        flex: 1 1 0;
        min-width: 0;
        text-align: justify;
    }
    #hero { padding-block: calc(var(--header-h) + .7rem) 3.2rem; }
}

/* ---------- Very low height (e.g., small landscape phone): Roles hidden to free up space ---------- */
@media (max-height: 430px) {
    #hero .hero-roles { display: none; }
}