/* Mobile safety net (duplicated from main.css so a stale main.css can't undo it) */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html, body {
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}

/* =============================================
   RESPONSIVE BREAKPOINTS
   1400px — small desktop / large laptop
   1200px — tablet landscape (hamburger nav kicks in)
   900px  — tablet portrait
   600px  — phone
   ============================================= */

/* =============================================
   ≤ 1400px — SMALL DESKTOP / LAPTOP
   ============================================= */
@media screen and (max-width: 1400px) {
section {
margin: 0 6rem;
}

#profile {
height: fit-content;
margin-bottom: 5rem;
}

#profile .section__pic-container {
width: 300px;
height: 300px;
}

.about-containers {
flex-wrap: wrap;
justify-content: center;
}

#about,
#contact,
#projects,
#experience {
height: fit-content;
}

/* Keep arrows inside the narrower margins */
.arrow {
margin-right: -3rem;
}
}

/* =============================================
   ≤ 1200px — TABLET LANDSCAPE
   ============================================= */
@media screen and (max-width: 1200px) {
#desktop-nav {
display: none;
}

#hamburger-nav {
display: flex;
}

#experience,
.experience-details-container {
margin-top: 2rem;
}

.section-container {
display: block;
}

/* Arrows are hidden once sections stack vertically */
.arrow {
display: none;
}

section,
.section-container {
height: fit-content;
}

section {
margin: 0 5%;
}

/* Profile section pic */
#profile {
gap: 1.5rem;
padding-bottom: 2rem;
}

#profile .section__pic-container {
width: 275px;
height: 275px;
margin: 0 auto;
}

/* =============================================
   ABOUT SECTION
   ============================================= */

.about-section-containers {
flex-direction: column;
align-items: center;
gap: 2rem;
width: 100%;
}

#about .section__pic-container {
width: 260px;
height: 260px;
margin: 0 auto;
flex-shrink: 0;
}

.about-pic {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2rem;
}

.about-details-container {
width: 100%;
align-items: center;
}

.about-containers {
margin-top: 0;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
width: 100%;
}

.details-container {
flex: 1 1 40%;
min-width: 180px;
max-width: 260px;
box-sizing: border-box;
}

.about-text,
.text-container {
padding-left: 0;
text-align: center;
width: 100%;
box-sizing: border-box;
}

#about,
#experience,
#projects {
margin-bottom: 6rem;
}
}

/* =============================================
   ≤ 900px — TABLET PORTRAIT
   ============================================= */
@media screen and (max-width: 900px) {
section {
margin: 0 4%;
}

#profile .section__pic-container {
width: 250px;
height: 250px;
}

.details-container {
flex: 1 1 45%;
max-width: 300px;
}

.occupations {
width: 100%;
}

.occupation-container {
box-sizing: border-box;
width: 100%;
}

#about,
#experience,
#projects {
margin-bottom: 5rem;
}
}

/* =============================================
   ≤ 600px — PHONE
   ============================================= */
@media screen and (max-width: 600px) {
#contact,
footer {
height: fit-content;
}

#profile {
height: fit-content;
margin-bottom: 3rem;
gap: 1rem;
padding-bottom: 1rem;
}

#profile .section__pic-container {
width: 200px;
height: 200px;
}

footer nav {
height: fit-content;
margin-bottom: 2rem;
}

/* =============================================
   ABOUT SECTION — phone
   ============================================= */

.about-section-containers {
flex-direction: column;
align-items: center;
gap: 1.5rem;
width: 100%;
}

#about .section__pic-container {
width: 200px;
height: 200px;
margin: 0 auto;
}

.about-details-container {
width: 100%;
align-items: center;
}

.about-containers {
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
flex-wrap: nowrap;
}

.details-container {
width: 90%;
max-width: 100%;
flex: unset;
box-sizing: border-box;
}

.about-text {
padding-left: 0;
text-align: center;
width: 100%;
box-sizing: border-box;
}

.text-container {
width: 100%;
text-align: center;
box-sizing: border-box;
}

.about-text p {
font-size: clamp(0.78rem, 3.6vw, 0.9rem);
line-height: 1.6;
}

#about,
#experience,
#projects {
margin-bottom: 4rem;
}

/* =============================================
   EXPERIENCE SECTION — fix article overflow
   ============================================= */

.article-container {
justify-content: center;
gap: 1.2rem;
}

article {
width: auto;
justify-content: flex-start;
gap: 0.5rem;
font-size: 0.9rem;
}

article h3 {
font-size: clamp(0.9rem, 4.5vw, 1rem);
word-break: break-word;
}

article p {
font-size: clamp(0.75rem, 4vw, 0.85rem);
}

.occupation {
font-size: 1rem;
}

/* =============================================
   CONTACT SECTION
   ============================================= */

.contact-info-upper-container {
flex-direction: column;
align-items: center;
padding: 0.9rem 0.5rem;
width: 92%;
max-width: 100%;
box-sizing: border-box;
}

.contact-info-container {
margin: 0;
gap: 0.4rem;
max-width: 100%;
}

.contact-info-container p {
word-break: keep-all;
overflow-wrap: normal;
white-space: normal;
line-height: 1.35;
text-align: center;
font-size: min(0.9rem, 3.6vw);
}

.contact-icon {
height: 1.6rem;
}

.email-icon {
height: 1.8rem;
}

/* =============================================
   OTHER SECTIONS
   ============================================= */

.btn-container {
flex-wrap: wrap;
justify-content: center;
}

.btn {
width: 7rem;
padding: 0.85rem;
}

.nav-links li a {
font-size: 1rem;
}

.experience-sub-title {
font-size: clamp(1.05rem, 5.5vw, 1.25rem);
}

.logo {
font-size: 1.5rem;
}

.nav-links {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}

.section__text__p2 {
font-size: clamp(1rem, 5vw, 1.25rem);
}

.title {
font-size: clamp(1.6rem, 8.5vw, 2rem);
}
}

/* =============================================
   TIMELINE + STACKED SKILLS — responsive
   ============================================= */
@media screen and (max-width: 1200px) {
.experience-stack .details-container {
width: 100%;
max-width: 100%;
min-width: 0;
flex: unset;
box-sizing: border-box;
padding: 1.5rem;
}

.experience-stack .article-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem 1.5rem;
}

/* Vertical timeline: center line, dots on it, panels alternate left/right */
.timeline {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
column-gap: 0;
row-gap: 0.5rem;
position: relative;
width: 100%;
}

.timeline-line {
display: block;
position: absolute;
grid-column: auto;
grid-row: auto;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-50%);
width: 3px;
height: auto;
align-self: auto;
}

.timeline-marker,
.timeline-marker.tl-1,
.timeline-marker.tl-2,
.timeline-marker.tl-3,
.timeline-marker.tl-4 {
grid-column: 1 / -1;
grid-row: auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 1.25rem 0 0.5rem;
min-height: 1.5rem;
z-index: 1;
align-self: auto;
}

.timeline-marker::before {
display: none;
}

.timeline-dot {
position: static;
transform: none;
}

.timeline-year,
.timeline-marker.tl-2 .timeline-year,
.timeline-marker.tl-4 .timeline-year {
position: absolute;
top: 50%;
bottom: auto;
left: calc(50% + 1.25rem);
transform: translateY(-50%);
}

.timeline-card {
width: auto;
box-sizing: border-box;
position: relative;
}

.timeline-card.above,
.timeline-card.above.tl-1,
.timeline-card.above.tl-3 {
grid-column: 1;
grid-row: auto;
align-self: auto;
margin-right: 1.75rem;
}

.timeline-card.below,
.timeline-card.below.tl-2,
.timeline-card.below.tl-4 {
grid-column: 2;
grid-row: auto;
align-self: auto;
margin-left: 1.75rem;
}

/* short horizontal stem from each panel to the center line */
.timeline-card::after {
content: "";
position: absolute;
top: 2rem;
width: 1.75rem;
height: 2px;
background: #155e75;
opacity: 0.5;
}

.timeline-card.above::after {
right: -1.75rem;
}

.timeline-card.below::after {
left: -1.75rem;
}

.experience-dark .timeline-card::after {
background: #7ea1e8;
}

.timeline .occupation-container {
height: auto;
}
}

@media screen and (max-width: 900px) {
.experience-stack .article-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media screen and (max-width: 600px) {
.timeline .occupation-container p {
font-size: clamp(0.7rem, 3.4vw, 0.82rem);
line-height: 1.55;
}

.timeline .occupation {
font-size: clamp(0.78rem, 3.9vw, 0.95rem);
}

.timeline .occupation-container {
padding: 1rem 0.85rem;
}

/* ---- Phone timeline: years left of the line, all panels on the right ---- */
.timeline {
display: block;
position: relative;
width: 100%;
}

.timeline-line {
position: absolute;
left: 1.4rem;
top: 0;
bottom: 0;
transform: none;
width: 3px;
height: auto;
}

.timeline-marker,
.timeline-marker.tl-1,
.timeline-marker.tl-2,
.timeline-marker.tl-3,
.timeline-marker.tl-4 {
display: block;
position: relative;
min-height: 1.5rem;
margin: 1.5rem 0 0.75rem;
}

.timeline-dot {
position: absolute;
left: 1.4rem;
top: 50%;
transform: translate(-50%, -50%);
}

.timeline-year,
.timeline-marker.tl-2 .timeline-year,
.timeline-marker.tl-4 .timeline-year {
position: absolute;
left: 2.5rem;
right: auto;
width: auto;
text-align: left;
top: 50%;
bottom: auto;
transform: translateY(-50%);
font-size: 0.95rem;
white-space: nowrap;
}

.timeline-card,
.timeline-card.above,
.timeline-card.above.tl-1,
.timeline-card.above.tl-3,
.timeline-card.below,
.timeline-card.below.tl-2,
.timeline-card.below.tl-4 {
display: block;
width: auto;
margin-left: 3rem;
margin-right: 0;
margin-bottom: 0.5rem;
box-sizing: border-box;
position: relative;
}

.timeline-card::after,
.timeline-card.above::after,
.timeline-card.below::after {
left: -1.6rem;
right: auto;
width: 1.6rem;
top: 2rem;
}

.menu-links a {
font-size: 1.15rem;
padding: 10px 16px;
}

/* ---- Skill entries: single centered 1x6 column, contained ---- */
.experience-stack .article-container {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
justify-items: center;
gap: 1rem;
}

.experience-stack article {
justify-content: flex-start;
max-width: 100%;
}

/* ---- Buttons: let the label breathe ---- */
.btn {
width: auto;
min-width: 7rem;
padding: 0.85rem 1.1rem;
white-space: nowrap;
}

}

/* Arrows are hidden below 1200px, so let sections shrink to content */
@media screen and (max-width: 1200px) {
#profile,
#about,
#experience,
#projects {
min-height: 0;
}
}

/* Skill blocks stack again once the viewport narrows */
@media screen and (max-width: 1200px) {
.experience-stack {
flex-direction: column;
align-items: center;
}
}