/* 
    this file is for shared styles and components 
    across all pages. must be conclude in all html files
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap");

:root {
    /* typography */
    --ff-heading: "Oswald", sans-serif;
    --ff-body: "Inter", sans-serif;

    --text-7: 3.815rem;
    --text-6: 3.052rem;
    --text-5: 2.441rem;
    --text-4: 1.953rem;
    --text-3: 1.563rem;
    --text-2: 1.25rem;
    --text-1: 1rem;
    --text-0: 0.8rem;

    /* color palette */
    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-3: #74c0fc;
    --blue-5: #339af0;
    --blue-7: #1c7ed6;
    --blue-9: #1864ab;

    --gray-0: #f8f9fa;
    --gray-1: #f1f3f5;
    --gray-3: #dee2e6;
    --gray-5: #adb5bd;
    --gray-7: #495057;
    --gray-9: #212529;

    --green-5: #22c55e;
    --yellow-5: #f59e0b;

    --white: #fff;
    --black: #000;

    /* border radius */
    --border-0: 4px;
    --border-1: 8px;
    --border-2: 16px;
    --border-3: 32px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: var(--ff-body);
}

h1,
h2,
h3,
h4 {
    font-family: var(--ff-heading);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--black);
}

button {
    font-family: inherit;
    cursor: pointer;
}

.wrapper {
    width: 100%;
    max-width: 1280px;
    padding-inline: 1rem;

    @media (width < 640px) {
        padding-inline: 0.5rem;
    }
}

.wrapper--wide {
    max-width: 1360px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 1rem;
}

.header__hamburger-menu {
    height: 100%;
    display: none;
    border: none;
    background-color: transparent;
}

.logo {
    font-size: var(--text-4);
}

.nav-container {
    display: flex;
    justify-content: space-between;
}

.nav__left-container {
    display: flex;
    gap: 1rem;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__close-btn {
    display: none;
    border: none;
    background-color: transparent;
    justify-self: flex-end;
}

.nav__close-btn svg:hover {
    path {
        fill: var(--gray-7);
    }
}

.nav__list {
    display: flex;
    align-items: center;
}

.nav__link {
    font-family: var(--ff-heading);
    font-size: var(--text-1);
}

.nav__link--active {
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.nav__item:hover {
    background-color: var(--blue-0);
}

.acc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.nav__item,
.acc__sign-in,
.acc__sign-up {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: var(--border-3);
}

.secondary-btn {
    background-color: var(--white);
    color: var(--blue-5);
    border: none;
    padding-block: 0.8rem;
    padding-inline: 2rem;
    border-radius: var(--border-3);
    border: 2px solid var(--blue-5);
    width: fit-content;

    a {
        color: var(--black);
        font-size: var(--text-1);
    }

    @media (width < 640px) {
        padding-block: 0.6rem;
        padding-inline: 1.5rem;
    }
}

.secondary-btn--square {
    border-radius: var(--border-0);
}

.secondary-btn:hover {
    background-color: var(--gray-3);
}

.primary-btn {
    background-color: var(--blue-5);
    color: var(--white);
    border: none;
    padding-block: 0.8rem;
    padding-inline: 1rem;
    border-radius: var(--border-3);
    width: fit-content;

    a {
        color: var(--white);
        font-size: var(--text-1);
    }

    @media (width < 640px) {
        padding-block: 0.6rem;
        padding-inline: 0.8rem;
    }
}

.primary-btn--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
}

.primary-btn:hover {
    background-color: var(--blue-3);
}

.acc__sign-in,
.acc__sign-up {
    border: none;
    font-size: var(--text-2);
    font-family: var(--ff-heading);
}

.acc__sign-in {
    background-color: var(--white);
}

.acc__sign-in:hover {
    background-color: var(--blue-0);
}

.acc__sign-up {
    background-color: var(--blue-5);
    color: var(--white);
}

.acc__sign-up:hover {
    background-color: var(--blue-3);
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2rem;
    background-color: var(--gray-0);
}

.footer {
    display: flex;
    justify-content: space-between;
}

.footer__section-container {
    display: flex;
    gap: 4rem;
}

.footer__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__section-title {
    font-size: var(--text-1);
    font-weight: normal;
}

.footer__item,
.footer__copyright {
    font-size: var(--text-0);
}

.footer__item:hover {
    text-decoration: underline;
}

.pt-96 {
    padding-block-start: 96px;
}

.pb-96 {
    padding-block-end: 96px;
}

.py-48 {
    padding-block: 48px;
}

.pb-48 {
    padding-block-end: 48px;
}

.card-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.card-section__title {
    margin-bottom: 0.5rem;
    font-size: var(--text-3);

    @media (width < 640px) {
        font-size: var(--text-2);
    }
}

.card-list {
    /* --columns: 1; */
    display: grid;
    /* grid-template-columns: repeat(var(--columns), 1fr); */
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 300px);
    gap: 1rem;

    @media (width > 1024px) {
        grid-auto-columns: 300px;
    }
}

.equal-column {
    --num-columns: 1;
    --row-gap: 2em;
    display: grid;
    grid-template-columns: repeat(var(--num-columns), 1fr);
    column-gap: 2rem;
    row-gap: var(--row-gap);

    @media (width > 640px) {
        --num-columns: 2;
        --row-gap: 1rem;
    }
}

.media-scroller {
    overflow-x: auto;
    overscroll-behavior-inline: contain;

    scroll-snap-type: inline mandatory;
}

.media-scroller > * {
    scroll-snap-align: start;
}

.overlay-blue {
    position: relative;
}

.overlay-blue::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to top,
        rgba(0, 0, 100, 0.4),
        rgba(0, 0, 100, 0.2)
    );
    z-index: 10;
}

.overlay-blue--to-right::after {
    background: linear-gradient(
        to right,
        rgba(0, 0, 100, 0.4),
        rgba(0, 0, 100, 0.2)
    );
}

.overlay-gray {
    position: relative;
    border-radius: var(--border-1);
    overflow: hidden;
    height: 100%;
}

.overlay-gray::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.5) 20%,
        rgba(0, 0, 0, 0.4) 20%,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 10;
}

.overlay-gray--lower::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.3) 18%,
        rgba(0, 0, 0, 0.2) 18%,
        rgba(0, 0, 0, 0) 21%,
        rgba(0, 0, 0, 0) 100%
    );
}

.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover {
    opacity: 0.8;
}

.card1 {
    position: relative;
    aspect-ratio: 1 / 1;
}

.card1--fill-title .card1__content {
    background-color: var(--white);
    border: 1px solid var(--gray-5);
    border-top: none;

    @media (width < 640px) {
        padding-block: 0.25rem;
        padding-inline: 0.5rem;
    }
}

.card1--fill-title .card1__title {
    color: var(--black);
}

.card1__img {
    aspect-ratio: 1 / 1;
    border-radius: var(--border-1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card1__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    z-index: 20;
}

.card1__title {
    font-size: var(--text-4);
    color: var(--white);

    @media (width < 1024px) {
        font-size: var(--text-3);
    }
}

.card1__title--small {
    font-size: var(--text-3);

    @media (width < 640px) {
        font-size: var(--text-2);
    }
}

.card2,
.card2__content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card2__content {
    padding-block-start: 0.5rem;
    padding-block-end: 1rem;
    gap: 0.5rem;
}
.card2__title {
    flex-grow: 1;
}

.card2__price {
    font-size: var(--text-0);
}

.card2__price-num {
    font-size: var(--text-1);
    font-weight: bold;
    color: var(--blue-9);
}

.card2--highlight {
    border: 1px solid var(--gray-5);
    border-radius: var(--border-1);
}

.card2--highlight .card2__img {
    border-radius: 0;
    aspect-ratio: 1 / 0.8;
}

.card2--highlight .card2__content {
    padding-inline: 1rem;
}

.card2__img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-1);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.card2__title {
    font-size: var(--text-1);
    font-weight: normal;
}

.card2__description {
    font-size: var(--text-0);
}

.card2__rating-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card2__rating,
.card2__rating-num {
    font-size: var(--text-0);
}

.card3 {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1.5;
}

.card3__description-container {
    position: absolute;
    z-index: 10;
    bottom: 8px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card3__title,
.card3__review,
.card3__price {
    color: var(--white);
}
.card3__price-num {
    font-size: var(--text-1);
    font-weight: bold;
}

.card3__title {
    font-size: var(--text-1);
}

.card3__review,
.card3__price {
    font-size: var(--text-0);
}

.card3__img {
    border-radius: var(--border-1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card4 {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--gray-5);
    gap: 0.5rem;
}

.card4__headline {
    font-size: var(--text-2);

    @media (width < 640px) {
        font-size: var(--text-1);
    }
}

.card4__content {
    display: flex;
    justify-content: space-between;

    @media (width < 1024px) {
        flex-direction: column;
        gap: 1rem;
    }
}

.card4__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 1rem;
}

.card4__price-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    @media (width < 1024px) {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }
}

.card4__price {
    font-size: var(--text-2);
    font-weight: bold;
    color: var(--blue-9);
}

.card4__info-text {
    font-size: var(--text-0);
}

.card4__info-title {
    font-weight: bold;
}

.carousel-container {
    position: relative;
}

.carousel-wrapper {
    overflow: hidden;
}

.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 1rem;
    transition: transform 0.3s ease;

    @media (width < 1024px) {
        grid-auto-columns: 250px;
    }

    @media (width < 640px) {
        grid-auto-columns: 200px;
    }
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    border: 2px solid var(--blue-5);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: var(--text-2);
    color: var(--blue-5);
    z-index: 10;
}

.carousel-btn:hover {
    background: var(--gray-1);
}

.carousel-btn.hidden {
    display: none;
}

.carousel-btn--prev {
    left: -12px;

    @media (width < 640px) {
        left: -6px;
    }
}

.carousel-btn--next {
    right: -12px;

    @media (width < 640px) {
        right: -6px;
    }
}

.split-section {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50%;
    gap: 1rem;

    @media (width < 640px) {
        grid-auto-columns: 100%;
        grid-auto-flow: row;
        gap: 2rem;
    }
}

.split-section__img {
    border-radius: var(--border-1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-section__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-inline: 2rem;
    text-align: center;

    @media (width < 640px) {
        padding-inline: 0;
        gap: 1rem;
    }
}

.split-section__title {
    font-size: var(--text-5);

    @media (width < 640px) {
        font-size: var(--text-4);
    }
}

.star-list {
    display: flex;
    align-items: center;
}

.star {
    width: 16px;
    height: 16px;

    path {
        fill: var(--blue-5);
    }
}

.star--empty {
    path {
        fill: var(--blue-0);
    }
}

.bg-gray-0 {
    background-color: var(--gray-0);
}

a.acc__sign-in,
a.acc__sign-up {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.breadcrumb__item {
    font-size: var(--text-0);
    color: var(--gray-5);
}

.breadcrumb__item a {
    color: var(--gray-5);
    text-decoration: none;
}

.breadcrumb__item a:hover {
    color: var(--blue-5);
    text-decoration: underline;
}

.breadcrumb__separator {
    color: var(--gray-5);
    font-size: var(--text-0);
}

.breadcrumb__item--active {
    color: var(--gray-7);
}

@media (width < 1024px) {
    .header__hamburger-menu {
        display: block;
    }

    .nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        height: 100%;
        width: 190px;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        justify-content: flex-start;
        padding-block-start: 1rem;
        padding-inline: 1rem;
        background-color: var(--gray-1);
    }

    .nav--open {
        display: block;
    }

    .nav__close-btn {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav__item {
        width: 100%;
    }

    .footer {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .footer__section-title {
        font-size: var(--text-2);
    }

    .footer__section-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer__section {
        border-bottom: 1px solid var(--gray-5);
        padding-bottom: 0.5rem;
    }
}