@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Text:ital@0;1&display=swap');


/* DM Sans – Variable Font */
.dm-sans {
    font-family: "DM Sans", sans-serif;
    font-weight: 100 900;
    font-style: normal;
}

/* DM Serif Text – Regular only */
.dm-serif {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
}

/* Theme Variables */
:root {
    --primary-color: #0037A7;
    --light-primary-color: #8BBFFE;
    --backup-primary-color: #3F75DE;

    --secondary-color: #DC001A;
    --light-secondary-color: #FE4914;
    --tertiary-color: #FFAF0B;
    --backup-color: #8D5382;

    --gradient-color-1: linear-gradient(90deg,
            var(--tertiary-color) 0%,
            var(--secondary-color) 52%,
            var(--tertiary-color) 88%);

    --main-white-color: #FFFFFF;
    --white-color: #F5F5F5;
    --off-white-color: #F4F4F7;

    --black-color-1: #111810;
    --black-color-2: #20211A;
    --black-color-3: rgba(32, 33, 26, 0.822);

    --gray-color-1: #4e4b51;
    --gray-color-2: #B7B7B7;
    --gray-color-3: #dbd8d8;

    --primary-color-rgb: #0038a780;
    --secondary-color-rgb: rgba(220, 0, 26, 0.5);
    --tertiary-color-rgb: rgba(255, 174, 11, 0.5);

    --dark-primary-color-rgb: rgba(3, 25, 70, 0.568);

    --primary-color-tag: #0038a834;

    --primary-color-80: hsla(220, 100%, 33%, 0.8);
    --secondary-color-80: hsla(353, 99%, 30%, 0.8);
    --tertiary-color-80: hsla(40, 100%, 30%, 0.8);
    --light-primary-color-80: hsla(213, 98%, 50%, 0.8);

    --primary-color-70: hsla(220, 100%, 33%, 0.7);
    --secondary-color-70: hsla(353, 99%, 30%, 0.7);

    --primary-color-40: hsla(220, 100%, 33%, 0.4);
    --light-primary-color-40: rgba(139, 191, 254, 0.4);
    --secondary-color-40: hsla(353, 71%, 67%, 0.4);

    --primary-color-30: hsla(220, 100%, 33%, 0.3);
    --secondary-color-30: hsla(353, 71%, 67%, 0.3);


    --primary-color-10: #0038a81a;
    --secondary-color-30: hsla(353, 71%, 67%, 0.1);

    --gray-color-1-10: hsla(270, 4%, 31%, 0.1);



    /* Updated font variables */
    --primary-font: "DM Sans", sans-serif;
    --heading-font: "DM Serif Text", serif;
}


* {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--main-white-color);
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

}

[x-cloak] {
    display: none !important;
}

img {
    -webkit-user-drag: none;
    user-select: none;
}

/* HEADINGS */

.heading-h2 {
    font-size: 3rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    color: var(--secondary-color);
}

/* SECTION CONTAINER */
.section-container {
    padding-top: 5rem;
    /* py-20 */
    padding-bottom: 5rem;
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    max-width: 80rem;
    /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    gap: 3rem;
    /* approximate space-y-12 */
}


.full-section-wrapper {
    width: 100%;
    /* w-full */
    padding-top: 4rem;
    /* py-16 */
    padding-bottom: 4rem;
}

.badge {
    text-align: center;
    background-color: var(--main-white-color);
    color: var(--primary-color);
    padding: 1rem 2rem;
    /* p-1 */
    border-radius: 1rem;
    /* rounded-2xl */
    font-weight: 700;
    /* font-bold */
    display: inline-block;
    font-size: 1rem;
    /* text-sm */
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
    .badge {
        font-size: 1.0625rem;
        /* 17px, sm:text-[17px] */
        padding: 0.5rem 0.5rem;
        /* sm:p-2 */
    }

    .section-container {
        padding-left: 1.5rem;
        /* sm:px-6 */
        padding-right: 1.5rem;
    }

    .heading-h2 {
        font-size: 3.7rem;
        /* text-5xl */
    }
}


@media (min-width: 768px) {

    /* md: */
    .section-wrapper {
        padding-top: 6rem;
        /* py-24 */
        padding-bottom: 6rem;
    }
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: 2rem;
        /* lg:px-8 */
        padding-right: 2rem;
    }
}

/* Hide scrollbar completely */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Prevent text & image selection while dragging */
.drag-slider,
.drag-slider * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Prevent image dragging ghost effect */
.drag-slider img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Improve touch horizontal scrolling */
.drag-slider {
    touch-action: pan-x;
}

/* ARTICLES */

.article a {
    border: none;
    background: none;
    cursor: pointer;
}

.article a {
    position: relative;
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    align-items: center;
}

.article p {
    margin: 0;
    position: relative;
    color: var(--white-color);
}

.article a::after {
    position: absolute;
    content: "";
    width: 0;
    left: 0;
    bottom: -7px;
    background: var(--secondary-color);
    height: 2px;
    transition: 0.3s ease-out;
}

.article p::before {
    position: absolute;
    /*   box-sizing: border-box; */
    content: "Read Full Article";
    width: 0%;
    inset: 0;
    color: var(--secondary-color);
    overflow: hidden;
    transition: 0.3s ease-out;
}

.article a:hover::after {
    width: 100%;
}

.article a:hover p::before {
    width: 100%;
}

.article a:hover svg {
    transform: translateX(4px);
    color: var(--secondary-color);
}

.article svg {
    color: var(--primary-color);
    transition: 0.2s;
    position: relative;
    width: 15px;
    transition-delay: 0.2s;
}

/* -------- */

.main-article a {
    border: none;
    background: none;
    cursor: pointer;
}

.main-article a {
    position: relative;
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    align-items: center;
}

.main-article p {
    margin: 0;
    position: relative;
    color: var(--secondary-color);
}

.main-article a::after {
    position: absolute;
    content: "";
    width: 0;
    left: 0;
    bottom: -7px;
    background: var(--primary-color);
    height: 2px;
    transition: 0.3s ease-out;
}

.main-article p::before {
    position: absolute;
    content: "Read Full Article";
    width: 0%;
    inset: 0;
    color: var(--primary-color);
    overflow: hidden;
    transition: 0.3s ease-out;
}

.main-article a:hover::after {
    width: 100%;
}

.main-article a:hover p::before {
    width: 100%;
}

.main-article a:hover svg {
    transform: translateX(4px);
    color: var(--primary-color);
}

.main-article svg {
    color: var(--secondary-color);
    transition: 0.2s;
    position: relative;
    width: 15px;
    transition-delay: 0.2s;
}

/* BUTTONS */

.brutalist-card__actions {
    margin-top: 1rem;
}

.brutalist-card__button {
    display: block;
    width: 100%;
    padding: 0.75rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 3px solid var(--primary-color);
    background-color: #fff;
    color: var(--primary-color);
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 5px 5px 0 var(--primary-color);
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 1rem;
}

.brutalist-card__button--read {
    background-color: var(--primary-color);
    color: #fff;
}

.brutalist-card__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.6s;
}

.brutalist-card__button:hover::before {
    left: 100%;
}

.brutalist-card__button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--secondary-color);
}

.brutalist-card__button--mark:hover {
    background-color: var(--primary-color);
    border-color: var(--backup-primary-color);
    color: #fff;
    box-shadow: 7px 7px 0 var(--primary-color);
}

.brutalist-card__button--read:hover {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff;
    box-shadow: 7px 7px 0 #800000;
}

.brutalist-card__button:active {
    transform: translate(5px, 5px);
    box-shadow: none;
}

/* ---------- */

.back-link {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.back-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    /* underline thickness */
    background-color: var(--primary-color);
    transition: width 0.3s ease, left 0.3s ease;
}

.back-link:hover::after {
    width: 100%;
    left: 0;
}

/* ALPINE */


[x-ref="carousel"] {
    scroll-behavior: auto;
    /* needed for JS momentum */
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
    cursor: grab;
}

[x-ref="carousel"].active {
    cursor: grabbing;
}

[x-ref="carousel"]::-webkit-scrollbar {
    display: none;
}


[x-ref="carousel"] img {
    user-select: none;
    pointer-events: none;
    /* prevents the image from being grabbed */
}

[x-ref="carousel"] {
    user-select: none;
    /* prevents text highlighting while dragging */
}