/* =========================================================
   styles-extra.css
   Loaded AFTER styles.css. It only adds what the new content
   needs, in the same purple / white-card language.
   ========================================================= */

/* ---------- 1. logo slider ----------
   The old slider used a CSS keyframe that moved the track by -50%
   over a fixed 20s: the speed changed with the window width and it
   jumped on hover and on resize. Motion is now driven by script.js
   at a constant pixels-per-second rate, and the strip can be dragged
   left and right with the mouse or a finger.                      */

.slider-track {
    animation: none !important;
    width: max-content;
    align-items: stretch;
    backface-visibility: hidden;
    cursor: grab;
    touch-action: pan-y;
}

.slider-track.is-dragging { cursor: grabbing; }

.slider-track.is-dragging .slider-item {
    pointer-events: none;   /* a drag must not fire the link */
}

.slider-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.slider-set {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.slider-item {
    flex: 0 0 auto;
    width: 170px;
    padding: 16px 12px;
    margin: 0 6px;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: var(--transition);
    -webkit-user-select: none;
            user-select: none;
}

/* every tile, whether it carries a link or not */
.slider-item:hover {
    border-color: rgba(74, 55, 179, .18);
    background-color: rgba(74, 55, 179, .04);
    transform: translateY(-4px);
}

.slider-track .slider-item img {
    width: 110px;
    height: 76px;
    margin: 0;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: var(--transition);
    -webkit-user-drag: none;
}

.slider-item:hover img { filter: none; opacity: 1; transform: none; }

.slider-name {
    font-size: .82rem;
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
}

.slider-item:hover .slider-name { color: var(--primary-color); }

@media (max-width: 768px) {
    .slider-item { width: 136px; padding: 12px 8px; }
    .slider-track .slider-item img { width: 86px; height: 60px; }
    .slider-name { font-size: .75rem; }
}

/* ---------- 2. skills: the two classes your CSS never styled ---------- */

.skill-box { margin-bottom: 38px; }

.skill-box > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(74, 55, 179, .12);
}

.skill-box > h3 i {
    font-size: 1.1rem;
    background-image: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.skill-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px 18px;
}

.skill-item i { font-size: 2rem !important; margin-bottom: 10px !important; }

.skill-item .skill-bar { margin-top: auto; }

.skill-percent {
    display: block;
    margin-top: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--secondary-color);
}

@media (max-width: 768px) { .skill-box { margin-bottom: 26px; } }

/* ---------- 3. projects: smaller cards, screenshots, show-all ---------- */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

@media (max-width: 992px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .projects-grid { grid-template-columns: 1fr; } }

.project-card { display: flex; flex-direction: column; }

.project-card[hidden] { display: none; }

/* text inside a card must be selectable and copyable */
.project-card,
.project-card * {
    -webkit-user-select: text;
            user-select: text;
}

.project-img { height: 150px; flex: 0 0 150px; }

.project-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 1;
}

.project-img .project-icon { z-index: 0; }
.project-img .project-category { z-index: 2; }
.project-img::after { z-index: 3; }

.project-content {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-content h3 { font-size: 1.05rem; line-height: 1.7; margin-bottom: 8px; }

.project-content > p { font-size: .92rem; color: #5a6472; }

.project-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 2px;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.metric { min-width: 70px; }

.metric-value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    line-height: 1.4;
}

.metric-label { display: block; font-size: .74rem; color: #8892a0; }

.project-tech { margin-top: 12px; }

.project-links {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-links .project-btn { padding: 9px 16px; font-size: .85rem; }

.project-btn.ghost-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid rgba(74, 55, 179, .35);
}

.project-btn.ghost-btn:hover { background-color: var(--primary-color); color: #fff; }

/* ---------- 4. research ---------- */

.research-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 16px;
}

.research-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: var(--border-radius);
    padding: 20px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
    transition: var(--transition);
}

.research-item:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .08); }

.research-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background-image: var(--gradient-primary);
    color: #fff;
    font-size: 1.05rem;
}

.research-year {
    display: inline-block;
    font-size: .78rem;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.research-body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.research-body p  { font-size: .92rem; color: #5a6472; margin: 0; }

/* ---------- 5. navbar language switch and helpers ---------- */

.lang-link {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 14px !important;
    border: 1px solid rgba(74, 55, 179, .3);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--primary-color) !important;
    transition: var(--transition);
}

.lang-link:hover { background-color: var(--primary-color); color: #fff !important; }

.inline-link {
    color: var(--primary-color);
    font-weight: 500;
    border-bottom: 1px dashed rgba(74, 55, 179, .45);
}

.inline-link:hover { border-bottom-style: solid; }

#toggle-projects { border: none; font-family: inherit; }

/* ---------- 6. English page: switch the layout to LTR ----------
   styles.css sets `html { direction: rtl }` globally.            */

html[lang="en"] { direction: ltr; }

html[lang="en"] body {
    font-family: 'Poppins', 'Vazirmatn', Arial, sans-serif;
    direction: ltr;
    text-align: left;
}

html[lang="en"] .hero-content,
html[lang="en"] .about-text,
html[lang="en"] .project-content,
html[lang="en"] .research-body,
html[lang="en"] .footer-content { text-align: left; }

html[lang="en"] .section-header { text-align: center; }

html[lang="en"] .skill-item { text-align: center; }

html[lang="en"] .skill-item::after { right: auto; left: 0; border-radius: 0 0 5px 0; }

html[lang="en"] .platform-arrow { transform: scaleX(-1); }

html[lang="en"] .project-img::after { content: 'View details'; }

/* ---------- 7. section bar with scroll progress ----------
   Appears once you scroll past the hero, shows where you are on the
   page and how far down you have gone.                            */

.section-nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 900;
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    pointer-events: none;
}

.section-nav.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.section-nav__progress {
    height: 3px;
    background-color: rgba(74, 55, 179, .12);
}

.section-nav__progress span {
    display: block;
    height: 100%;
    width: 0;
    background-image: var(--gradient-primary);
    transition: width .1s linear;
}

.section-nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.section-nav__links::-webkit-scrollbar { display: none; }

.section-nav__links a {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: .88rem;
    color: #6b7280;
    white-space: nowrap;
    transition: var(--transition);
}

.section-nav__links a:hover { color: var(--primary-color); background-color: rgba(74, 55, 179, .06); }

.section-nav__links a.is-active {
    color: #fff;
    background-image: var(--gradient-primary);
    box-shadow: 0 6px 16px -8px rgba(74, 55, 179, .9);
}

@media (max-width: 768px) {
    .section-nav__links { justify-content: flex-start; padding: 7px 12px; }
    .section-nav__links a { padding: 6px 13px; font-size: .82rem; }
}

/* ---------- 8. research and teaching ---------- */

.research-list {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

@media (max-width: 900px) { .research-list { grid-template-columns: 1fr; gap: 22px; } }

.research-column { display: grid; gap: 16px; }

.research-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    color: var(--primary-color);
    margin: 0 0 4px;
}

.research-heading::after {
    content: "";
    flex: 1;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(74, 55, 179, .35), transparent);
    border-radius: 2px;
}

html[lang="en"] .research-heading::after {
    background-image: linear-gradient(90deg, rgba(74, 55, 179, .35), transparent);
}

.research-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: var(--border-radius);
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.research-item::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background-image: var(--gradient-primary);
    opacity: 0;
    transition: var(--transition);
}

.research-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .09);
}

.research-item:hover::after { opacity: 1; }

.research-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background-image: var(--gradient-primary);
    color: #fff;
    font-size: 1.1rem;
}

.research-body { min-width: 0; }

.research-year {
    display: inline-block;
    font-size: .76rem;
    color: var(--secondary-color);
    background-color: rgba(123, 104, 238, .1);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.research-body h4 { font-size: 1.03rem; margin: 0 0 8px; line-height: 1.7; }

.research-body p {
    font-size: .93rem;
    color: #5a6472;
    margin: 0;
    line-height: 1.95;
}

.research-body strong { color: var(--primary-color); font-weight: 600; }

.research-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.research-tags span {
    font-size: .74rem;
    color: #6b7280;
    background-color: #f4f5f9;
    border: 1px solid rgba(0, 0, 0, .04);
    padding: 3px 10px;
    border-radius: 6px;
}

.research-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--primary-color);
}

.research-link:hover { gap: 11px; }

/* bold highlights inside project text */
.project-content strong,
.hero-subtitle strong,
.about-text strong { color: var(--primary-color); font-weight: 600; }

/* ---------- 9. equal-height research cards ---------- */

.research-column { grid-auto-rows: 1fr; }
.research-column .research-item { height: 100%; }

/* ---------- 10. language switch inside the section bar ---------- */

.section-nav__lang {
    margin-inline-start: 10px;
    border: 1px solid rgba(74, 55, 179, .3);
    color: var(--primary-color) !important;
}

.section-nav__lang:hover {
    background-image: var(--gradient-primary);
    color: #fff !important;
    border-color: transparent;
}

.section-nav__lang i { margin-inline-end: 5px; font-size: .8rem; }

/* ---------- 11. companies strip sits higher now ---------- */

.companies-strip { padding-block: 40px 20px; }
.companies-strip .section-header { margin-bottom: 18px; }

/* ---------- 12. identical project buttons ---------- */

.project-links .project-btn {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center;
    text-align: center;
}

/* ---------- 13. tighter research headings ---------- */

.research-heading { margin-bottom: 0; }
.research-column { gap: 14px; }

/* ---------- 14. balanced research columns ----------
   The two columns hold a different number of cards (3 and 2), so the
   shorter one used to stop halfway and leave a hole. Both columns now
   stretch to the same height and their cards share that height, and
   the gap under each heading is tightened.                         */

.research-list { align-items: stretch; }

.research-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.research-heading {
    margin: 0 0 2px;
    flex: 0 0 auto;
}

.research-column .research-item {
    flex: 1 1 auto;
    height: auto;
    align-items: flex-start;
}

.research-body { display: flex; flex-direction: column; height: 100%; }
.research-body p { flex: 1 1 auto; }
.research-tags { margin-top: auto; padding-top: 12px; }
.research-link { margin-top: 12px; }

@media (max-width: 900px) {
    .research-column { height: auto; }
    .research-column .research-item { flex: 0 0 auto; }
}

/* ---------- 15. footer: centred link columns, calmer rhythm ---------- */

footer .footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto auto minmax(0, .6fr);
    gap: 40px;
    align-items: start;
    justify-content: center;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 24px;
}

footer .footer-links {
    display: contents;
}

footer .footer-links-column { min-width: 160px; }

footer .footer-links-column h4 {
    font-size: .95rem;
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 10px;
}

footer .footer-links-column h4::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 28px;
    height: 2px;
    background-image: var(--gradient-primary);
    border-radius: 2px;
}

footer .footer-links-column a {
    display: block;
    margin-bottom: 9px;
    font-size: .9rem;
    opacity: .85;
    transition: var(--transition);
}

footer .footer-links-column a:hover { opacity: 1; padding-inline-start: 4px; }

footer .footer-logo p { max-width: 34ch; opacity: .8; }

footer .footer-social { justify-self: end; align-self: start; }

@media (max-width: 900px) {
    footer .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        text-align: start;
    }
    footer .footer-logo { grid-column: 1 / -1; }
    footer .footer-social { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
    footer .footer-content { grid-template-columns: 1fr; }
}

/* ---------- 16. research: every card the same size, new ones append below ---------- */

.research-list { align-items: start; }

.research-column {
    display: grid;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 14px;
    height: auto;
}

.research-column .research-item {
    flex: none;
    height: auto;
    align-items: flex-start;
}

/* script.js measures the tallest card and gives every card that height,
   so the two columns line up and a new card simply appends underneath. */

/* ---------- 17. footer: full width, shorter ---------- */

footer { padding-block: 34px 0 !important; }

footer .footer-content {
    max-width: none;
    width: 100%;
    padding-inline: clamp(20px, 4vw, 56px);
    gap: 28px 40px;
    margin-bottom: 22px;
}

footer .footer-logo h3 { margin-bottom: 6px; }
footer .footer-logo p { font-size: .9rem; margin: 0; }

footer .footer-links-column h4 { margin-bottom: 11px; padding-bottom: 8px; }
footer .footer-links-column a { margin-bottom: 7px; }

footer .footer-bottom {
    padding-block: 14px;
    margin-top: 0;
    font-size: .85rem;
}

footer .footer-social a { width: 36px; height: 36px; }

/* ---------- 18. hero claim line ---------- */

.hero-tagline {
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.85;
    margin: 6px 0 14px;
    background-image: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

@media (max-width: 768px) { .hero-tagline { font-size: 1.05rem; } }

/* ---------- 19. section bar: never on top of the hero ---------- */

.section-nav {
    top: 0;                 /* script.js moves it under the fixed header */
    z-index: 800;           /* below the header, above the content */
}

/* anchor targets clear both bars */
section[id] { scroll-margin-top: 130px; }

/* ---------- 20. footer: fills the width, bigger type, shorter ---------- */

footer .footer-content {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 22px 40px;
    align-items: start;
    justify-content: stretch;
    margin-bottom: 18px;
}

footer .footer-logo h3 { font-size: 1.25rem; }
footer .footer-logo p { font-size: .96rem; max-width: 40ch; }

footer .footer-links-column h4 { font-size: 1.02rem; margin-bottom: 10px; padding-bottom: 7px; }
footer .footer-links-column a { font-size: .95rem; margin-bottom: 6px; }

footer .footer-bottom { font-size: .9rem; padding-block: 12px; }

footer .footer-social { justify-self: end; }
footer .footer-social a { width: 38px; height: 38px; }

@media (max-width: 1000px) {
    footer .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    footer .footer-logo { grid-column: 1 / -1; }
    footer .footer-social { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- 21. header and hero fixes ---------- */

/* the little red dot next to the logo */
header .logo::after,
header .logo::before { display: none !important; content: none !important; }

/* the header is fixed, so the hero has to start below it */
.hero { padding-top: 120px; }

@media (max-width: 768px) { .hero { padding-top: 96px; } }

/* ---------- 22. the section bar takes over the top ----------
   Instead of floating under a header that scrolls, the bar now pins
   itself to the very top and the site header steps aside while it is
   visible, so there is never a white strip hanging in mid-page.    */

.section-nav {
    top: 0 !important;
    z-index: 1200;
    box-shadow: 0 6px 20px -14px rgba(0, 0, 0, .5);
}

body.has-topbar header {
    transform: translateY(-110%);
    transition: transform .35s ease;
}

header { transition: transform .35s ease; }

.section-nav__brand {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--primary-color);
    padding-inline-end: 14px;
    margin-inline-end: 6px;
    border-inline-end: 1px solid rgba(0, 0, 0, .08);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .section-nav__brand { display: none; }
}

/* ---------- 23. contact cards ----------
   The grid I tried here overrode your own layout for the three
   contact cards, which read worse than the original. Only the
   English direction fix is kept.                                */

html[lang="en"] .platform-link,
html[lang="en"] .platform-info { direction: ltr; text-align: left; }

/* ---------- 24. every logo behaves the same on hover ----------
   The cause of the inconsistency: the hover rules were written for
   a.slider-item, and a company without a website link is rendered as
   a div, not an anchor. Those five tiles therefore had no hover at
   all - no colour, no border. Every rule below targets .slider-item,
   so linked and unlinked tiles behave identically.                */

.slider-item {
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.slider-track .slider-item img {
    filter: grayscale(1);
    opacity: .68;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.slider-item:hover,
.slider-item:focus-within {
    border-color: rgba(74, 55, 179, .2) !important;
    background-color: rgba(74, 55, 179, .05) !important;
    transform: translateY(-4px) !important;
}

.slider-item:hover img,
.slider-item:focus-within img {
    filter: grayscale(0) !important;
    opacity: 1 !important;
    transform: scale(1.03) !important;
}

.slider-item:hover .slider-name,
.slider-item:focus-within .slider-name { color: var(--primary-color) !important; }

div.slider-item { cursor: default; }

/* ---------- 25. one standard size for every section heading ----------
   The headings were inheriting whatever padding each section had in
   styles.css, so "درباره من" sat far from its content while
   "همکاری با شرکت‌ها" was cramped. Same rhythm for all of them now. */

.about,
.skills,
.projects,
.contact,
#research {
    padding-block: clamp(56px, 7vw, 92px);
}

.companies-strip { padding-block: clamp(40px, 5vw, 64px) !important; }

.section-header {
    margin: 0 auto 42px !important;
    padding-inline: 20px;
    max-width: 760px;
    text-align: center;
}

.section-header h2 {
    font-size: clamp(1.45rem, 3vw, 2rem) !important;
    line-height: 1.6;
    margin: 0 !important;
}

.section-header .underline {
    width: 68px !important;
    height: 4px !important;
    margin: 14px auto 0 !important;
    border-radius: 4px;
}

.section-header .section-description {
    margin: 14px auto 0 !important;
    max-width: 62ch;
    font-size: .96rem;
    line-height: 2;
    color: #636e72;
}

@media (max-width: 768px) {
    .section-header { margin-bottom: 30px !important; }
}

/* ---------- 26. skills without the invented percentages ----------
   A number like 80% implies a measurement that does not exist. The
   bar still shows the relative level; the figure is gone.          */

.skill-percent { display: none !important; }

.skill-item .skill-bar { margin-top: auto; margin-bottom: 4px; }

/* ---------- 27. the white frame around the page ----------
   styles.css line 20 says `margin: 10` with no unit. That value is
   invalid, the browser drops the whole declaration, and body keeps
   the default 8px margin - which is the white strip you can see on
   the left, right and bottom of the dark footer.                  */

html, body { margin: 0 !important; }

footer {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
}

/* ---------- 28. back-to-top button ----------
   At the bottom of the page the footer was painting over it, so the
   tap landed on the footer instead of the button - most noticeable
   on a phone, where the button sits inside the footer area.       */

.scroll-top {
    z-index: 1500 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .scroll-top {
        bottom: 18px !important;
        inset-inline-end: 18px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

/* ---------- 29. a calmer hero ---------- */

.hero-tagline {
    font-size: clamp(1.1rem, 2.1vw, 1.45rem);
    margin: 10px 0 16px;
    max-width: 30ch;
}

.hero-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.hero-capabilities span {
    font-size: .88rem;
    color: #5a6472;
    background-color: rgba(74, 55, 179, .06);
    border: 1px solid rgba(74, 55, 179, .12);
    border-radius: 999px;
    padding: 6px 14px;
}

@media (max-width: 768px) {
    .hero-tagline { max-width: none; }
    .hero-capabilities span { font-size: .8rem; padding: 5px 11px; }
}

/* ---------- 30. hero hierarchy ----------
   The claim line was a purple gradient sitting right under a purple
   heading: two elements with the same weight competing for the eye.
   Near-black gives the heading room to be the heading.            */

.hero-tagline {
    background-image: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: #2d3436;
    font-weight: 600;
    max-width: 34ch;
}

.hero-capabilities { display: none; }

/* ---------- 31. no horizontal overflow, especially on the LTR page ----------
   On a phone the English page was stretching to about twice the
   viewport width: one element wider than the screen makes the browser
   widen the whole document, which leaves the content on one side and
   an empty band on the other. These rules cap the page and clip
   anything decorative that reaches past the edge.                   */

html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

body > * {
    max-width: 100vw;
}

/* decorative layers must never add width */
.particles-container,
.section-background,
body::before,
body::after {
    max-width: 100vw;
    overflow: hidden;
    pointer-events: none;
}

.particle { will-change: transform; }

@media (max-width: 900px) {
    /* every block stays inside the screen, whatever the writing direction */
    header,
    section,
    footer,
    .container,
    .hero,
    .hero-content,
    .hero-image,
    .about-content,
    .about-text,
    .skills-container,
    .projects-grid,
    .research-list,
    .contact-container,
    .slider-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }

    /* a long unbroken word or URL can widen the page on its own */
    p, h1, h2, h3, h4, span, a, li { overflow-wrap: anywhere; }

    /* the image and its floating badges are a common overflow source */
    .hero-image { display: flex; justify-content: center; }
    .hero-image .image-container { max-width: 78vw; }
    .tech-stack { max-width: 100%; flex-wrap: wrap; justify-content: center; }
}

/* the English page is the one that was breaking */
html[lang="en"] { overflow-x: hidden; }
html[lang="en"] body { width: 100%; max-width: 100%; }

/* =========================================================
   V15: resume access, experience, project layout, mobile hero,
   right-to-left fixes and reduced motion. Same palette and
   motion as the rest of the site.
   ========================================================= */

/* ---------- resume button in the header menu and the section bar ---------- */

.nav-links a.nav-resume {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 999px;
    background-image: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(74, 55, 179, .28);
    transition: var(--transition);
}
.nav-links a.nav-resume::after { display: none; }
.nav-links a.nav-resume:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(74, 55, 179, .36); }

.section-nav__links a.section-nav__resume {
    margin-inline-start: 10px;
    background-image: var(--gradient-primary);
    color: #fff !important;
    border-color: transparent;
}
.section-nav__resume i { margin-inline-end: 5px; font-size: .8rem; }

/* ---------- hero on phones: photo and badges stacked, nothing off-screen ---------- */

@media (max-width: 768px) {
    .hero .hero-image {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .hero .hero-image .image-container {
        width: 210px;
        height: 210px;
        max-width: 70vw;
        max-height: 70vw;
        margin: 0 auto;
        flex: none;
    }
    .hero .tech-stack { justify-content: center; margin: 0; }
    .hero .scroll-indicator { display: none; }
}

/* ---------- experience ---------- */

.experience { position: relative; background-color: #f8f9fa; }

.exp-timeline {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}
.exp-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    inset-inline-start: 43px;
    width: 2px;
    background-image: linear-gradient(var(--primary-color), var(--secondary-color));
    opacity: .25;
}

.exp-item {
    position: relative;
    display: flex;
    gap: 20px;
    margin-bottom: 22px;
}
.exp-icon {
    position: relative;
    z-index: 1;
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background-image: var(--gradient-primary);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(74, 55, 179, .25);
}
.exp-card {
    flex: 1;
    min-width: 0;
    padding: 18px 22px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .03);
    transition: var(--transition);
}
.exp-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .08), 0 5px 15px rgba(0, 0, 0, .04); }

.exp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}
.exp-head h3 { margin: 0; font-size: 1.1rem; color: var(--dark-color); }
.exp-dates {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(74, 55, 179, .08);
    color: var(--primary-color);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}
.exp-org { margin: 4px 0 8px; color: var(--secondary-color); font-weight: 600; }
.exp-card ul { margin: 0; padding-inline-start: 20px; color: #5a6472; font-size: .95rem; }
.exp-card li { margin-bottom: 4px; }
.exp-card li::marker { color: var(--secondary-color); }

.exp-education {
    max-width: 880px;
    margin: 30px auto 0;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .03);
}
.exp-education h3 { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; color: var(--dark-color); }
.exp-edu-item { display: flex; align-items: flex-start; gap: 12px; }
.exp-edu-item i { margin-top: 5px; color: var(--primary-color); font-size: 1.15rem; }
.exp-edu-item strong { display: block; color: var(--dark-color); }
.exp-edu-item span { color: #666; font-size: .9rem; }

.exp-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.exp-actions .btn[hidden] { display: none; }
.exp-actions #toggle-experience i { transition: var(--transition); }
.exp-actions #toggle-experience[aria-expanded="true"] i { transform: rotate(180deg); }

.experience.is-collapsed .exp-item:nth-child(n+3),
.experience.is-collapsed .exp-education { display: none; }
.experience.is-collapsed .exp-item:nth-child(2) {
    max-height: 150px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.experience.is-collapsed .exp-timeline {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
}

@media (max-width: 640px) {
    .exp-timeline::before { inset-inline-start: 39px; }
    .exp-icon { width: 40px; height: 40px; font-size: 1rem; border-radius: 12px; }
    .exp-item { gap: 14px; }
    .exp-card { padding: 16px 16px; }
    .exp-education { grid-template-columns: 1fr; margin-inline: 20px; }
}

/* ---------- projects: the screenshot links to the dashboard ---------- */

a.project-img { display: block; }

/* ---------- right-to-left: labels such as "SSIS (ETL)" keep their brackets ---------- */

.skill-item span,
.project-tech span { unicode-bidi: plaintext; }

/* ---------- less motion when the visitor's system asks for it ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- about: lead line, four-step career path, key facts ---------- */

.about-text .about-lead {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--dark-color);
    margin-bottom: 30px;
}

.about-subtitle {
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
}

.about-path {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.about-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(108, 92, 231, 0.05);
    border: 1px solid rgba(74, 55, 179, 0.12);
}

/* chevron in the gap, pointing to the next step */
.about-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-end: -15px;
    width: 8px;
    height: 8px;
    border: solid var(--secondary-color);
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(135deg);
}

html[lang="en"] .about-step:not(:last-child)::after {
    transform: translateY(-50%) rotate(-45deg);
}

.about-step__num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 700;
}

.about-step h5 {
    margin: 0;
    font-size: 1rem;
    color: var(--dark-color);
}

.about-step > span:last-child,
.about-fact span {
    font-size: .92rem;
    line-height: 1.7;
    color: #555;
}

.about-facts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.about-fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ececf4;
}

.about-fact i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(108, 92, 231, 0.08);
    color: var(--primary-color);
}

.about-fact h5 {
    margin: 0 0 2px;
    font-size: .95rem;
    color: var(--dark-color);
}

@media (max-width: 900px) {
    .about-path { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .about-step:not(:last-child)::after { display: none; }
    .about-facts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .about-text .about-lead { font-size: 1.1rem; }
    .about-path { grid-template-columns: 1fr; }
    .about-step {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 14px;
        row-gap: 2px;
        padding: 14px 16px;
    }
    .about-step__num { grid-row: span 2; margin: 0; }
}

/* ---------- hand cursor on everything clickable ----------
   A `* { cursor: auto }` rule in styles.css used to override the
   browser's own pointer on links, so linked cards showed an arrow. */

a[href],
button,
.btn,
.filter-btn,
.project-img { cursor: pointer; }

/* ---------- hero text: the intro plays once and never hides it again ----------
   styles.css used fadeInRight on wide screens and fadeIn below 768px.
   Crossing that width (rotating a phone, resizing the window) swapped
   the animation, which restarted it and dropped the text to opacity 0.
   One animation for every width, and `backwards` so nothing is held
   once it has finished.                                            */

.hero-content { animation: fadeIn .9s ease backwards; }