/*==========================================================
FOUNDATION.CSS
Project Framework
==========================================================*/

/*==========================================================
01 DESIGN TOKENS
==========================================================*/

:root{

    --primary:#4B5D4A;
    --secondary:#A99B85;
    --accent:#D8C9A8;

    --dark:#2B2B2B;
    --grey:#666666;

    --light:#FAF9F7;
    --white:#FFFFFF;

    --font_primary:'Prata', serif;
    --font_secondary:'Inter', Arial, sans-serif;

    --fs_small:14px;
    --fs_body:18px;
    --fs_heading:38px;
    --fs_display:72px;

    --radius_sm:4px;
    --radius_md:8px;
    --radius_lg:16px;
    --radius_round:999px;

    --shadow_sm:0 4px 12px rgba(0,0,0,.08);
    --shadow_md:0 12px 30px rgba(0,0,0,.14);

}

/*==========================================================
02 RESET
==========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font_secondary);
    font-size:var(--fs_body);
    line-height:1.7;

    color:var(--dark);
    background:var(--white);

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;

}

p{

    margin-bottom:18px;

}

ul{

    margin:0;
    padding:0;

}

/*==========================================================
03 TYPOGRAPHY
==========================================================*/

.font_primary{

    font-family:var(--font_primary);

}

.font_secondary{

    font-family:var(--font_secondary);

}

.fs_small{

    font-size:var(--fs_small);

}

.fs_body{

    font-size:var(--fs_body);

}

.fs_heading{

    font-size:var(--fs_heading);

}

.fs_display{

    font-size:var(--fs_display);
    line-height:1.1;

}

.fw_300{

    font-weight:300;

}

.fw_400{

    font-weight:400;

}

.fw_500{

    font-weight:500;

}

.fw_700{

    font-weight:700;

}

.upper{

    text-transform:uppercase;

}

.txt_center{

    text-align:center;

}

.txt_left{

    text-align:left;

}

.txt_right{

    text-align:right;

}

/*==========================================================
04 COLOURS
==========================================================*/

.txt_primary{

    color:var(--primary);

}

.txt_secondary{

    color:var(--secondary);

}

.txt_dark{

    color:var(--dark);

}

.txt_grey{

    color:var(--grey);

}

.txt_white{

    color:var(--white);

}

.bg_primary{

    background:var(--primary);

}

.bg_secondary{

    background:var(--secondary);

}

.bg_light{

    background:var(--light);

}

.bg_white{

    background:var(--white);

}

/*==========================================================
05 SPACING
==========================================================*/

.space_8{

    height:8px;

}

.space_16{

    height:16px;

}

.space_24{

    height:24px;

}

.space_32{

    height:32px;

}

.space_48{

    height:48px;

}

.space_64{

    height:64px;

}

.space_96{

    height:96px;

}

.mt_16{

    margin-top:16px;

}

.mt_24{

    margin-top:24px;

}

.mt_32{

    margin-top:32px;

}

.mt_48{

    margin-top:48px;

}

.mb_16{

    margin-bottom:16px;

}

.mb_24{

    margin-bottom:24px;

}

.mb_32{

    margin-bottom:32px;

}

.mb_48{

    margin-bottom:48px;

}

/*==========================================================
06 BUTTONS
==========================================================*/

.btn_base{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 30px;

    border:none;

    cursor:pointer;

    transition:.25s;

    font-size:17px;

    border-radius:4px;

}

.btn_primary{

    background:var(--primary);
    color:#fff;

}

.btn_primary:hover{

    background:#3e4e3d;
    color:#fff;

}

.btn_secondary{

    background:#efefef;
    color:var(--dark);

}

.btn_secondary:hover{

    background:#e2e2e2;

}

/*==========================================================
07 FORMS
==========================================================*/

.input{

    width:100%;

    padding:14px 18px;

    border:1px solid #ddd;

    border-radius:4px;

    font-family:inherit;
    font-size:16px;

    transition:.2s;

    background:#fff;

}

.input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(75,93,74,.12);

}

.label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

/*==========================================================
08 DISPLAY
==========================================================*/

.d_block{

    display:block;

}

.d_inline{

    display:inline;

}

.d_inline_block{

    display:inline-block;

}

.d_flex{

    display:flex;

}

.flex_column{

    flex-direction:column;

}

.flex_row{

    flex-direction:row;

}

.flex_wrap{

    flex-wrap:wrap;

}

.justify_center{

    justify-content:center;

}

.justify_between{

    justify-content:space-between;

}

.align_center{

    align-items:center;

}

.align_start{

    align-items:flex-start;

}

.align_end{

    align-items:flex-end;

}

/*==========================================================
09 WIDTHS
==========================================================*/

.w_25{

    width:25%;

}

.w_50{

    width:50%;

}

.w_75{

    width:75%;

}

.w_100{

    width:100%;

}

/*==========================================================
10 IMAGES
==========================================================*/

.img_full{

    width:100%;
    height:auto;

}

.img_cover{

    width:100%;
    height:100%;

    object-fit:cover;

}

/*==========================================================
11 POSITION
==========================================================*/

.pos_relative{

    position:relative;

}

.pos_absolute{

    position:absolute;

}

.overflow_hidden{

    overflow:hidden;

}

/*==========================================================
12 SHADOWS
==========================================================*/

.shadow_sm{

    box-shadow:var(--shadow_sm);

}

.shadow_md{

    box-shadow:var(--shadow_md);

}

/*==========================================================
13 RADIUS
==========================================================*/

.radius_sm{

    border-radius:var(--radius_sm);

}

.radius_md{

    border-radius:var(--radius_md);

}

.radius_lg{

    border-radius:var(--radius_lg);

}

.radius_round{

    border-radius:999px;

}

/*==========================================================
14 TRANSITIONS
==========================================================*/

.transition{

    transition:.25s;

}

.hover_zoom{

    transition:.25s;

}

.hover_zoom:hover{

    transform:scale(1.03);

}

/*==========================================================
15 GALLERY
==========================================================*/

.gallery_grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:24px;

}

.gallery_item{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    border-radius:8px;

    background:#f5f5f5;

    box-shadow:var(--shadow_sm);

}

.gallery_image{

    position:absolute;

    inset:0;

    display:block;

}

.gallery_image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.3s;

}

.gallery_item:hover img{

    transform:scale(1.06);

}

.gallery_column{
    margin-bottom:16px;
}
/*==========================================================
TAG BUTTON
==========================================================*/

.gallery_tag{

    position:absolute;

    right:10px;

    bottom:10px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(245,245,245,.95);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    line-height:1;

    color:#666;

    text-decoration:none;

    box-shadow:0 2px 8px rgba(0,0,0,.18);

    z-index:50;

    transition:.25s;

}

.gallery_tag:hover{

    background:#fff;

    color:var(--primary);

    transform:scale(1.08);

}

.gallery_tag::after{

    content:"Tag People";

    position:absolute;

    right:0;

    bottom:50px;

    padding:6px 10px;

    border-radius:4px;

    background:rgba(0,0,0,.85);

    color:#fff;

    font-size:13px;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:.2s;

}

.gallery_tag:hover::after{

    opacity:1;

}

/*==========================================================
SEARCH BAR
==========================================================*/

.gallery_search{

    width:100%;

    padding:16px 22px;

    border:1px solid #ddd;

    border-radius:6px;

    font-size:18px;

    transition:.2s;

}

.gallery_search:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(75,93,74,.12);

}

/*==========================================================
UPLOAD BUTTON
==========================================================*/

.gallery_upload{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    height:100%;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:991px){

    .gallery_grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:575px){

    .gallery_grid{

        grid-template-columns:1fr;

    }

}


/*==========================================================
16 PHOTO VIEWER
==========================================================*/

.photo_viewer{

    text-align:center;

}

.photo_viewer img{

    display:inline-block;

    max-width:100%;

    max-height:80vh;

    border-radius:var(--radius_md);

    box-shadow:var(--shadow_md);

    background:#fff;

}

/*==========================================================
17 PHOTO DETAILS
==========================================================*/

.photo_details{

    max-width:900px;

    margin:0 auto;

}

.photo_details h2{

    margin-bottom:18px;

}

.photo_details p{

    margin-bottom:14px;

}

.photo_details hr{

    margin:20px 0 28px;

    border:0;

    border-top:1px solid #e5e5e5;

}

/*==========================================================
18 PHOTO TAGGING
==========================================================*/

.tag-search{

    position:relative;

    margin-bottom:28px;

}

#personSearch{

    width:100%;

    padding:14px 18px;

    font-size:17px;

    font-family:var(--font_secondary);

    border:1px solid #ddd;

    border-radius:var(--radius_md);

    transition:.2s;

    outline:none;

}

#personSearch:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(75,93,74,.12);

}

#searchResults{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    margin-top:4px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:var(--radius_md);

    overflow:hidden;

    box-shadow:var(--shadow_sm);

    z-index:500;

}

.search-result{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 18px;

    cursor:pointer;

    transition:.15s;

}

.search-result:hover{

    background:var(--light);

}

#taggedPeople{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:20px;

}

.tag-name{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    margin:6px;

    background:var(--primary);
    color:#fff;

    border-radius:999px;

    box-shadow:var(--shadow_sm);

    user-select:none;

}

.tag-text{

    user-select:none;

}

.remove-tag{

    display:flex;

    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    margin-left:10px;

    border-radius:50%;

    cursor:pointer !important;

    user-select:none;

    flex-shrink:0;

    line-height:1;

    font-weight:bold;

}

.remove-tag:hover{

    background:rgba(255,255,255,.2);

}

/*==========================================================
19 UTILITIES
==========================================================*/

.cursor_pointer{

    cursor:pointer;

}

.text_nowrap{

    white-space:nowrap;

}

.hidden{

    display:none;

}

/*==========================================================
20 RESPONSIVE
==========================================================*/

@media (max-width:991px){

    .fs_display{

        font-size:56px;

    }

    .fs_heading{

        font-size:30px;

    }

}

@media (max-width:767px){

    body{

        font-size:16px;

    }

    .btn_base{

        width:100%;

    }

    .photo_details{

        padding:0 10px;

    }

}

@media (max-width:575px){

    .fs_display{

        font-size:42px;

    }

    .gallery_tag{

        width:36px;

        height:36px;

        font-size:24px;

    }

}


/*==========================================================
TAGS
==========================================================*/

.tag-name{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    margin:6px;

    background:var(--primary);
    color:#fff;

    border-radius:999px;

    box-shadow:var(--shadow_sm);

    cursor:pointer;

}

.tag-text{

    line-height:1;

}

.remove-tag{
    display:none;
}

.tag-name:hover .remove-tag{

    opacity:1;

}

.remove-tag:hover{

    color:#ffd4d4;

}

.search-count{

    float:right;

    color:#888;

    font-size:14px;

    font-weight:500;

}