@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Rock+Salt&display=swap');

/* == GLOBAL STYLES ==*/

* {
    padding: 0;
    margin: 0;
}

html {
    line-height: 1.5;

    --pri-blue: #223CB7;
    --sec-light-navy: #3F404E;
    --text-col: #2B2C39;
    --acc-grey: #EDEDED;
    --background-col: #F9F9F9;
    --nav-col: #111111;
    --card-shadow: 0 6px 22px rgba(0,0,0,.18);
    --card-shadow-hover: #3A55D8;
}

body {
    font-family: "Roboto", sans-serif;
    text-wrap: balance;
    color: var(--text-col);
    background: var(--background-col);
}

h1, h2, h3 {
    font-family: "Roboto", sans-serif;
    color: var(--text-col);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

h1 {
    font-size: 4.06rem;
    text-align: center;
}

h1.accent {
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-style: normal;
    color: var(--pri-blue);
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--text-col);
}

/* ============================ NAV STYLES ============================ */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--nav-col);
    padding: 0.5rem 0;
    border-bottom: none;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.25rem;
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: 0.25rem 0;
}

nav a {
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    color: var(--background-col);
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    padding: 0.75rem 0.25rem;
    display: inline-block;
}

nav a:hover {
    color: var(--pri-blue);
    /** add other effect **/
}

nav a.accent {
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-style: normal;
    
}

/*===== PAGE HEADER =====*/
.page-header {
    padding-top: 4rem;         /* same across all pages */
    padding-bottom: 2rem;
    text-align: center;
}

.page-header h1 {
    font-family: "Rock Salt", cursive;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--pri-blue);
    margin: 0;                 
}

/*============================ HOMEPAGE ============================*/

/*== INTRO BOX ==*/
.intro-box {
    background-color: var(--acc-grey);   /* your accent grey variable */
    width: min(800px, 90%);              /* responsive max width */
    margin: 4rem auto;                   /* centers it horizontally with space on top/bottom */
    padding: 2.5rem 2rem;                /* interior spacing */
    border-radius: 10px;                 /* soft corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* subtle depth */
    text-align: center;
}

/* Heading inside box */
.intro-box h2 {
    font-family: "Rock Salt", cursive;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pri-blue);
    margin-bottom: 1rem;
    text-align: left;

}

/* Paragraph inside box */
.intro-box p {
    font-family: "Roboto", sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-col);
    margin: 0 auto;
    max-width: 600px; /* keeps text readable */
    text-align: justify;
}

/* ==== MOODBOARD ==== */
.moodboard {
    width: min(1100px, 92vw);   /*max responsive width*/
    margin: 3rem auto 4rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr); /*create 12-col grid*/
    gap: 12px;
}

/* base tile */
.moodboard .tile {
    position: relative;
    display: block;         /* makes the whole tile 'clickable'*/
    border-radius: 10px;    /* round tile edges*/
    overflow: hidden;       /*clips image outside tile*/
    background: var(--acc-grey); /* fallback while image loads */
    box-shadow: 0 4px 18px var(--card-shadow);
    transform: translateZ(0); /* better rendering */
    transition: transform .22s ease, box-shadow .22s ease;
}

/* define diff tile options*/
.moodboard .tile { 
    aspect-ratio: 4 / 3;    /* landscape */
    grid-column: span 4;
}   

.moodboard .tile.wide { 
    aspect-ratio: 16 / 9;   /* widescreen */
    grid-column: span 6;
}

.moodboard .tile.tall { 
    aspect-ratio: 3 / 4;    /* portrait */
    grid-column: span 4;
}  

.moodboard .tile.medtall {
    aspect-ratio: 5 / 6; 
    grid-column: span 4;
}


/* tile images */
.moodboard .tile img {
    width: 100%; height: 100%;                  /* makes img fill tile fully*/
    object-fit: cover; object-position: center; /* crop evenly from center*/
    display: block;
    transition: transform .22s ease;
}

/* labels for linked tiles */
.moodboard .tile .label {
    position: absolute;                         /* sits wrt tile*/
    left: 10px; bottom: 10px;
    padding: 0.35rem 0.6rem;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    color: var(--background-col);
    background: rgba(0,0,0,0.55);               /* semi-transparant black bg*/
    border-radius: 8px;                         /* rounds edges */
}

.moodboard a.tile:hover {                       /* apply hover only to <a> tiles*/
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.moodboard a.tile:hover img {
    transform: scale(1.04);                     /* zooms img in*/
}

/* breakpoints for smaller screens*/
@media (max-width: 900px) {
    .moodboard { grid-template-columns: repeat(8, 1fr); }   /* from 12 cols to 8 cols*/
    .moodboard .tile { grid-column: span 4; }  /* half width (4/8)*/
    .moodboard .tile.wide { grid-column: span 8; } /* full width (8/8) */
}
@media (max-width: 560px) {
    .moodboard { grid-template-columns: repeat(4, 1fr); }   /* from 8 cols to 4 cols*/
    .moodboard .tile,
    .moodboard .tile.wide,
    .moodboard .tile.tall { grid-column: span 4; } /* single column (4/4)*/
}

/* ============================ PROJECTS ============================ */

.projects{
    width: min(1100px, 92vw);   /*responsive width constraint*/
    margin: 2.5rem auto 4rem;   /*top right bottom left*/
    display: grid;              
    gap: 1.25rem;               /*project cards have spacing between them*/
}

/* ===== Card ===== */
.project-card{
    display: grid;                      /* makes thumbnail and content containers grid items*/
    grid-template-columns: 200px 1fr;   /* we define a 2 col grid: thumbnail (200px) | content (wtv is left) */
    gap: 1rem;
    text-decoration: none;              /* link but styled like a card (no underline) */
    background: var(--acc-grey);
    color: var(--text-col);
    border: 1px solid var(--sec-light-navy);
    border-radius: 10px;                /* round corners of card */
    box-shadow: var(--card-shadow);
    overflow: clip;                     /* content stays within card*/
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
}

.project-card:hover{
    transform: translateY(-3px);            /* hover animation by lifting card by 3px*/
    box-shadow: var(--card-shadow-hover);
    border-color: var(--pri-blue);
}

/* ===== Thumbnail ===== */
.project-card .thumb{   /* targets the thumb class inside .project-card*/
    margin: 0;
    aspect-ratio: 1 / 1;            /* makes sure our thumbnails stay square*/
    background: var(--background-col);          /* placeholder behind img if loading */
    overflow: hidden;               /* clips img so it don't spill outside card*/
}

.project-card .thumb img{
    width: 100%; height: 100%;      /* img fill parent container (thumb)*/
    object-fit: cover; object-position: center;     /*make sure img covers entire container area*/
    display: block;
    transition: transform .25s ease;
}

.project-card:hover .thumb img{
    transform: scale(1.03);         /* hover animation zooms image by 3%*/
}

/* ===== Temporary thumbnail used until a project image is added ===== */
.project-card .thumb-placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background:
        linear-gradient(135deg, rgba(34, 60, 183, .10), rgba(34, 60, 183, .02)),
        var(--background-col);
}

.project-card .placeholder-mark{
    font-family: "Rock Salt", cursive;
    color: var(--pri-blue);
    font-size: 2rem;
    line-height: 1;
}

.project-card .placeholder-label{
    font: 600 .68rem/1 "Roboto", sans-serif;
    letter-spacing: .12em;
    color: var(--sec-light-navy);
}

  /* ===== Content ===== */
.project-card .content{
    padding: 1rem 1.25rem 1.25rem 0.5rem;   /* top right bottom left*/
}

.project-card h3{   /* styles the card heading*/
    margin: .25rem 0 .5rem;                     /* push para away from heading*/
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);   /* clamps depending on screen size (min, prefer, max)*/
}

.project-card p{
    margin: .4rem 0;
    font-family: "Roboto", sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-col);
}

.project-card .project-placeholder{
    color: var(--sec-light-navy);
    font-style: italic;
}

.project-card .project-link{
    display: inline-block;
    margin-top: .8rem;
    font: 700 .72rem/1 "Roboto", sans-serif;
    letter-spacing: .08em;
    color: var(--pri-blue);
}

/* ===== Tech stack tags ===== */
.project-card .tags{
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;               /* remove bullet points */
    display: flex;                  /* turn list into row */
    flex-wrap: wrap;                /* allow tags to wrap if we have a lot*/
    gap: .4rem .5rem;
}

.project-card .tags li{
    font: 600 0.78rem/1 "Roboto", sans-serif;
    background: var(--background-col);
    padding: .35rem .5rem;
    border-radius: 999px;       /*makes rounded element*/
}

/* ===== Responsive ===== */
@media (max-width: 780px){      /* applies when width <= 780px*/
    .project-card{
        grid-template-columns: 140px 1fr;   /* make thumbnail size smaller*/
    }
}

@media (max-width: 560px){      /* applies when width <= 560px*/
    .project-card{
        grid-template-columns: 1fr;      /* stack thumbnail and content*/
    }
    .project-card .thumb{ aspect-ratio: 16 / 9; }   /* efficient space use (more vertical space)*/
}

/* ============================ Contact Page ============================ */
.contact-page {
    width: min(800px, 92vw);
    margin: 4rem auto 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}

.contact-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 650px;
    color: var(--text-col);
}

.contact-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.contact-links a img {
    width: 96px;
    height: 96px;
    filter: grayscale(50%);
    transition: filter .2s ease, transform .2s ease;
}

.contact-links a:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ============================ EXPERIENCE PAGE ============================ */

.timeline {
    position: relative;         /* so elements inside use timeline's context*/
    width: min(1100px, 92vw);
    margin: 4rem auto;
}

/* ----- timeline line ----- */
.timeline::before {         /* psuedo-element*/
    content: "";            /* make invisible box*/
    position: absolute;     /* sit inside timeline*/
    left: 2.25rem;          /* line position*/
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sec-light-navy);
    z-index: 1;             /* behind nodes */
}

/* ----- each timeline item ----- */
.timeline-item {
    position: relative;  /* anchor node inside each item */
    margin: 3rem 0;      /* vertical space between items*/
    padding-left: 4rem;  /* space for line + node */
}

/* ----- node sits exactly on the line ----- */
.timeline-node {
    position: absolute;             /* anchor to timeline-item*/
    left: 2.25rem;
    top: 0;
    transform: translate(-50%, 0);  /* to actually center node on line */
    width: 16px;
    height: 16px;
    background: var(--pri-blue);
    border-radius: 50%;             /* turns square node to circle*/
    border: 4px solid var(--pri-blue);
    z-index: 2;                     /* make node sit above timeline*/
}

/* ----- date of experience ----- */
.timeline-date {
    margin-left: 2.5rem;                    /* set to right of line*/
    font-family: "Rock Salt", cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    color: var(--pri-blue);
    margin-bottom: .4rem;
    text-wrap: balance;
}


/* ----- content box below date ----- */
.timeline-content {
    margin-left: 2.5rem;                    /* align with date */
    background: var(--acc-grey);
    padding: 1rem 1.25rem;
    border-radius: 10px;                    /* round edges */
    border: 1px solid var(--sec-light-navy);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.timeline-media{
    width: 100%;        
    max-width: 450px;
    margin: 0 0 .75rem 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--acc-grey);
    aspect-ratio: 4 / 3;
}

.timeline-media img{
    width: 100%; height: 100%;
    display: block;
    object-fit: cover; 
    object-position: center;
}

/* temporary EPEC media placeholder until a photo is added */
.timeline-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--sec-light-navy);
    background: linear-gradient(135deg, rgba(34, 60, 183, .08), rgba(34, 60, 183, .02));
}

.timeline-media-placeholder span {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sec-light-navy);
}

.experience-placeholder {
    font-style: italic;
    opacity: .72;
}

.timeline-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;     /* 2 col structure*/
    gap: 0.75rem;
    margin: 0 0 .75rem 0;
}

/* ============================ TRAVEL PAGE ============================ */

.travel-map{                    /* outer container*/
    width: min(1100px, 92vw);
    margin: 4rem auto;
}

.map-wrap{                          /* the container that actually holds world map*/
    position: relative;             /* anchors abs pos elements inside (pins)*/
    aspect-ratio: 2 / 1;
    border-radius: 12px;            
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    background: var(--acc-grey);
}

.map-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==== Pins ==== */
.map-pin{
    position: absolute;                 /* anchored to map-wrap*/
    transform: translate(-50%, -100%); /* center pin's center ontop coordinate (not the top left)*/
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;                    /* makes cursor to hand to make it look clickable*/
}

/* purely the visual element (the dot)*/
/* span is generic container representing visual element of dot, so that btn only handles interactions*/
.map-pin span{      /* 'find all span elements inside .map-pin and style them like this*/
    width: 7px;
    height: 7px;
    border: 3px solid var(--pri-blue);
    background: var(--pri-blue);
    border-radius: 50%;     /* make container round*/
    display: block;
    box-shadow: 0 0 0 4px rgba(34,60,183,.18);
    transition: transform .18s ease;
}

/* pin enlargement animation*/
.map-pin:hover span{ 
    transform: scale(1.12); 
}

/* ==== Card popup ====*/
.map-card{
    position: fixed;            /* card sticks on fixed location (anchored to viewport)*/
    right: max(4vw, 16px);
    bottom: max(4vw, 16px);
    width: min(520px, 92vw);
    max-height: 78vh;
    overflow: auto;             /* allows scrolling inside card when >max-height*/
    background: var(--acc-grey);
    color: var(--text-col);
    border: 1px solid var(--sec-light-navy);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.2);
    padding: 1rem 1.1rem 1.2rem;
    z-index: 9872;
}

/* card heading style*/
.map-card h3{
    margin: .1rem 2rem .35rem 0;
    font-weight: 700;
    font-size: 1.1rem;       
    line-height: 1.3;         
    font-family: "Roboto", sans-serif;
}

/* card date of visiting style*/
.card-when{
    margin: 0 0 .4rem 0;
    font: 600 .95rem/1.35 "Roboto", sans-serif;
    color: var(--pri-blue);
    }

/* card highlights style*/
.card-highlights{
    margin: 0 0 .7rem 0;
    line-height: 1.55;
}

/* container that holds photos*/
.card-photos{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns*/
    gap: .5rem;
}

/* individual img behaviour*/
.card-photos img{
    width: 100%; height: 100%;  /* fill card-photos completely*/
    display: block;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
}

/* ==== Close button ==== */
.card-close{
    position: absolute;                 /* pos relative to map-card*/
    top: 6px; right: 8px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: transparent;
    font-size: 1.6rem; line-height: 1;
    cursor: pointer;                    /* shows hand cursor on hover*/
    color: var(--text-col);
}