/* :root {
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --card-shadow: #a0a0a0;
    --text: #1e293b;
    --text-light: #f8fafc;
    --accent: #3b82f6;
    --accent-light: #8dbffd;

    --shadow-dark: rgba(160, 160, 160, 0.4);
    --shadow-light: rgba(255, 255, 255, 0.8);
} */
:root {
    --bg: #192328;
    /* warm parchment */
    --card-bg: #ffffff;
    --card-shadow: rgba(99, 84, 71, 0.25);

    --text: #2f2a25;
    /* deep brown-gray */
    --text-light: #fdfdfb;

    --accent: #d89a33;
    /* golden enchantment */
    --accent-light: #f1c66a;
    --accent-muted: #e7c697;

    --highlight: #7ba7b6;
    /* soft lake blue */
    --glow: rgba(241, 198, 106, 0.35);
    --glow-light: rgba(255, 255, 255, 0.103);

    --shadow-dark: rgba(60, 45, 32, 0.4);
    --shadow-light: rgba(255, 248, 230, 0.8);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;

    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text-light);
    margin: 0;
    padding: 0;
    gap: 2em;

    background: var(--bg);
}

main {
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: 10em;
}


/* Hero Content */
.hero-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    align-items: center;

    height: 100vh;
    width: 100%;

    font-size: 1.25rem;

    background-image: radial-gradient(rgba(20, 30, 40, 0.6), rgba(20, 30, 40, 0.4)), url('../img/school_images/school_hero_image.png');
    /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)), url('../img/school_images/school_hero_image.png'); */
    background-position: center;
    background-size: cover;
    background-repeat: none;
    box-shadow: 0 -2em 50px var(--bg) inset;

    color: #f9f6f2;

}

.hero-content>header {
    /* backdrop-filter: blur(5px) brightness(0.9); */
    padding: 1em;
    border-radius: 1em;
}

.hero-content h1 {
    font-size: 2.75rem;
    text-shadow: 0px 0px 8px var(--accent-muted);
}

.hero-content span {
    font-size: 1rem;
}

.hero-content p {
    text-shadow: 0px 0px 8px var(--text-light);
    color: var(--accent-muted);
}


.hero-button {
    border-radius: 1rem 0.1rem 1rem 0.1rem;

}

/* CTA */
.cta-button {
    padding: 13px 20px;
    font-size: 1.25rem;
    width: fit-content;
    background: transparent;
    background-size: 400% 400%;
    background-image: linear-gradient(-10deg, var(--accent), var(--glow-light), var(--accent));
    animation: bgGlow 2s ease infinite alternate;
}


@keyframes bgGlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }

    /* 
    100% {
        background-position: 0% 50%;
    } */
}

.cta-button:hover {
    /* background-color: var(--accent-light); */
}

/* Details section */


.section-description {
    text-align: center;
    grid-template-columns: 3fr 2fr;
    height: min-content;
    padding: 20px;
    border-radius: 2em;
}

.section-description .card {
    width: fit-content;
}

.fire-weaving-bcg {

    background-image: radial-gradient(rgba(20, 30, 40, 0.6), rgba(20, 30, 40, 0.4)), url('../img/other/fire_weaving.jpg');

    background-position: center;
    background-size: cover;
    background-repeat: none;
    box-shadow: 0 0 15px 15px var(--bg) inset;
}

/* Main CTA Section */

.main-cta {
    margin: 3em;
    padding: 3em 0;
    border-radius: 2em;

    /* box-shadow: 0px 0px 40px var(--highlight), 0px 0px 40px var(--highlight) inset; */
    background-color: transparent;
    background-image: none;
    backdrop-filter: blur(2px);

    /* box-shadow: 0 0 60px 10px rgba(150, 200, 255, 0.1),
        0 0 30px 5px rgba(100, 150, 255, 0.05) inset; */
    animation: softPulse 3s ease-in-out infinite alternate;
}


@keyframes softPulse {
    from {
        box-shadow: 0px 0px 60px rgba(150, 200, 255, 0.08), 0px 0px 60px rgba(150, 200, 255, 0.08) inset;
    }

    to {
        box-shadow: 0px 0px 60px rgba(150, 200, 255, 0.28), 0px 0px 60px rgba(150, 200, 255, 0.28) inset;
    }
}

.main-cta h2 {
    font-size: 2rem;
    /* text-shadow: 0px 0p?x 10px var(--highlight); */

}

.main-cta>ol {
    text-align: start;

}

.main-cta li {
    font-size: 1.15rem;
    margin-top: 1em;
}

.main-cta>.cta-button {
    background-image: linear-gradient(-10deg, var(--highlight), var(--glow-light), var(--highlight));

}

.secondary-cta-section {
    width: 50%;
    align-self: center;
    background-image: url('../img/other/secondary_image.jpg');

    background-position: center;
    background-size: cover;
    background-repeat: none;
    box-shadow: 0 0 20px 20px var(--bg) inset;

    gap: 20em !important;
    padding: 3em 10em;
}

/* General */

h2,
h3,
h4 {
    margin: 0;
}

button {
    background: var(--accent-light);
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    cursor: pointer;
    width: fit-content;
}

/* button:hover {
    background: var(--accent);
} */

.align-start {
    align-items: start;
    justify-content: start;
    text-align: start;
}

.align-end {
    align-items: end;
    justify-content: end;
    text-align: end;
}

.align-center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pill {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    /* background: var(--card-bg); */
    border-radius: 1.5em;
    padding: 3px 8px 3px 3px;
    /* box-shadow: 5px 5px 20px var(--text-light),
        -5px -5px 20px var(--glow); */
    box-shadow: 0px 0px 20px var(--glow), 0px 0px 50px var(--glow) inset;
    backdrop-filter: blur(5px);

    font-weight: lighter;

    color: var(--text-light);
    background-image: linear-gradient();


}

.avatars {
    display: inline-flex;
    flex-direction: row-reverse;
}

.avatar:not(:last-child) {
    margin-left: -25px;
}

.avatar>img {
    position: relative;
    width: 35px;
    /* border: 2px solid var(--accent-light); */
    box-shadow: 2px 0 5px var(--accent-muted);
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.cite-block {
    display: grid;
    grid-template-columns: [img-area] max(100px, 10%) [text-area] max(200px, 90%);
    grid-template-rows: 60% 40%;

    text-align: start;
    align-items: center;

    column-gap: 2em;

    align-self: center;
    width: min-content;

    width: max(350px, 60%);

    box-shadow: 0px 0px 20px var(--glow), 0px 0px 50px var(--glow) inset;

    padding: 15px;
    border-radius: 65px 20px 20px 65px;
}

.cite-block>figure {
    margin: 0;
    padding: 0;
    height: min-content;
    grid-column: 1;
    grid-row: 1 / span 2;
}

.cite-block img {
    clip-path: circle(50%);
    width: 100px;
}

.cite-block>cite {
    width: 100%;
    text-align: start;
    /* min-width: max-content; */
}

.spaced-column {
    display: flex;
    flex-direction: column;

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

    gap: 2em
}

.grid-section {
    display: grid;
    grid-auto-flow: column;
    column-gap: 2em;
}

.spaced-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    gap: 2em
}

/* carousel */

/* idea: increase size via an animation on focused element */
.carousel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    overflow-x: auto;
    scroll-behavior: smooth;

    gap: 1em;
    width: 100%;

    anchor-name: --carousel;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after;
}

.carousel::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    position: fixed;
    position-anchor: --carousel;
    position-area: center bottom;

    padding: 1em 0;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel::scroll-button(right),
.carousel::scroll-button(left) {
    content: '→';
    border: none;
    padding: 0;
    margin: 0;

    background-color: var(--accent);
    color: var(--text-light);
    font-family: Consolas;
    font-size: 2em;

    width: 40px;
    height: 40px;

    text-align: center;
    border-radius: 20px;

    cursor: pointer;

    position: fixed;
    position-anchor: --carousel;
    position-area: right center;
    translate: -50%;

}

.carousel::scroll-button(left) {
    translate: 50%;
    content: '←';
    position-area: left center;
}

.carousel::scroll-button(right):hover,
.carousel::scroll-button(left):hover {
    scale: 0.95;
}

.carousel::scroll-button(right):disabled,
.carousel::scroll-button(left):disabled {
    opacity: 0.4;
    cursor: auto;
}

.carousel::scroll-button(right):disabled:hover,
.carousel::scroll-button(left):disabled:hover {
    scale: 1;
}

.carousel>.card {
    flex: 0 0 20em;
    aspect-ratio: 5 / 5;
    scroll-snap-align: center;
}

.carousel>.card::scroll-marker {
    content: '';
    height: 1em;
    width: 1em;
    background-color: var(--text);
    border-radius: 50%;
}

.carousel>.card::scroll-marker:target-current {
    height: 1em;
    width: 2em;
    background-color: var(--accent);
    border-radius: 1em;
}

.card {
    /* color: var(--text); */
    /* background-color: var(--card-bg); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    border-radius: 20px;
    padding: 5px 20px;
    box-shadow: 0px 0px 40px var(--glow) inset;



}

.carousel>.card {
    width: fit-content;
    text-align: center;


}

.card>small {
    padding: 1em 0 0 0;
    font-style: italic;
}

.strong-basics-img,
.shape-your-path-img,
.master-the-art-img,
.extracurricular-activities-img,
.postgraduate-school-img,
.magic-duels-img,
.dorms-img,
.dragon-fare {
    width: 90%;
    aspect-ratio: 1/1;

    background-position: center;
    background-size: cover;
    background-repeat: none;
    box-shadow: 0 0 20px 20px var(--bg) inset;

    background-image: url('../img/carousel_images/strong_basics.jpg');
}

.shape-your-path-img {
    background-image: url('../img/carousel_images/shape_your_path.jpg');
}

.master-the-art-img {
    background-image: url('../img/carousel_images/master_the_art.jpg');
}

.extracurricular-activities-img {
    background-image: url('../img/carousel_images/extracurricular_activities.jpg');

}

.postgraduate-school-img {
    background-image: url('../img/carousel_images/postgraduate_school.jpg');
}

.magic-duels-img,
.dorms-img,
.dragon-fare {
    width: 90%;
    aspect-ratio: 4/3;
    background-image: url('../img/events/magic_duels.jpg');

}

.dorms-img {
    aspect-ratio: 16/9;
    background-image: url('../img/events/dorms.jpg');

}

.dragon-fare {
    background-image: url('../img/events/dragons_fare.jpg');

}


.card>img {
    width: 100%;

}

/* NOTE: this transition does not work on card's for some reason */
.hover-highlight {
    transition: background-color 0.5s ease, box-shadow 0.5s ease, background-image 0.5s ease;

}

.hover-highlight:hover {
    box-shadow: 0px 0px 40px var(--glow), 0px 0px 40px var(--glow) inset;
    background-color: transparent;
    background-image: none;
    backdrop-filter: blur(2px);
}

/* Footer */
footer {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;

    width: 100%;

    margin: 7em 0px 0px 0px;
    padding: 1em 0 1em 0;
    background-image: linear-gradient(var(--bg), var(--text));
}

footer h3 {
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
}

footer p {
    font-size: 0.85rem;
    margin: 0px;
    padding: 0.5rem 0 2rem 0;
}

footer .social-icon {
    font-size: 1.5rem;
    margin: 3px 15px;
    padding: 0px;
    color: var(--text-light);
}