@font-face {
    font-family: 'Klima';
    src: url('Klima-Regular.woff2') format('woff2'),
        url('Klima-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    color: #1a1a1a;
}

h1 {
    z-index: 3;
    justify-content: center;

}

/* Added style to make display as a grid */
#channel-blocks{
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	justify-content: center;
}


.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-areas:
        "header header"
        "divider divider"
        "destinations-column status-column"
        "title boarding-button"
        "subheader subheader"
        "arena-link arena-link"
        "destinations status";
    grid-template-rows: auto auto auto auto auto auto 1fr;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* keeps it behind all content */
}

.hero .header {
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem 1rem;
}

.hero .header p {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    text-align: center;
    color: #F1B100;
    font-family: "Inconsolata", monospace;
    font-weight: 400;
}

.hero .divider {
    grid-area: divider;
    height: 1px;
    background: grey;
    margin: 0 1rem;
}

.hero .destinations-column {
    grid-area: destinations-column;
    padding: 1rem 1rem;
    padding-block-start: 6rem;
}

.hero .status-column {
    grid-area: status-column;
    padding: 1rem 2rem;
    padding-block-start: 6rem;
}

.hero .title h1 {
    grid-area: title;
    font-family: "Inconsolata", monospace;
    font-weight: 700;
    display: flex;
    align-items: flex-start;
    font-size: 2.5rem;
    padding: 1rem;
    color: white;
    padding-block-start: 0.2rem;
}

.hero .subheader {
    grid-area: subheader;
    display: flex;
    /* align-items: flex-start; */
    padding: 1rem;
}

.subheader p, .boarding-button p {
    color: white;
}

.destinations-column ul, .status-column ul, .destinations ul, .status ul {
    color: #444444;
    font-size: 0.90rem;
}
.arena-link-container a {
    color: #F1B100;
}

.hero .boarding-button {
    grid-area: boarding-button;
    padding: 0.5rem 2rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.boarding-button p, .subheader p, .arena-link-container a, .destinations-column ul, .status-column ul, .destinations ul, .status ul {
    font-family: "Courier Prime", monospace;
}


.hero .arena-link-container {
    grid-area: arena-link;
    padding: 1rem;
    font-size: 2rem;
    padding: 0.5rem;
    width: fit-content; /* makes it only as wide as the content */
    margin-inline-start: 1rem;/* shifts the whole box to the right */
    transition: background 0.3s ease; 
}

.hero .arena-link-container:hover {
    background: #00C951;
}

.hero .arena-link-container:hover a {
    color: black;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.boarding-button p {
    color: #00C951;
    text-shadow: 0 0 8px #00C951;
    animation: blink 2s ease-in-out infinite;
}

.hero .destinations {
    grid-area: destinations;
    padding: 1rem 1rem;
}

.hero .status {
    grid-area: status;
    padding: 1rem 2rem;
}

.hero {
    row-gap: 1rem;
}

.hero .destinations, .hero .status {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block-start: 2rem;
}


.arena-link {
    font-size: 2rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    z-index: 2;
}

.arena-link:hover {
    opacity: 0.7;
}

.heroscroll {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 3;
    background: #F1B100; /* add this */
    border-radius: 50%; /* makes it circular */
     animation: scroll-bounce 1.4s ease-in-out infinite;
}

.scrollicon {
    width: 1.25rem;
    height: 1.25rem;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
    transform: rotate(-45deg);
    margin-top: -0.4rem;
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

.content {
    padding: 3rem 2rem;
    background: white;
}

/* Channel-blocks section: mobile-first (min 335px)*/

    .channel-blocks-section {
        position: relative;
        min-height: 100vh;
        padding: 1.5rem 1rem 3rem;
        overflow: clip;
    }

    .channel-blocks-section-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
    }

/* Making all the content in the chennel blocks section stay on top of the background video */
    .channel-blocks-section #channel-description,
    .channel-blocks-section #channel-blocks {
        position: relative;
        z-index: 1;
    }


/* Blockquote style */

.content {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers children horizontally */
}

blockquote {
    text-align: left;
    justify-content: center;
    margin: 0 auto; /* centers the blockquote horizontally */
    padding: 2rem; /* adds breathing room */
}

.quote {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: black;
    /* font-family: "Inconsolata", monospace; */
    font-family: "Barlow", sans-serif;
    margin-bottom: 1rem;
}

.quote-more {
    display: none; /* hidden by default on mobile */
}

.read-more-button {
    background: none;
    border: none;
    color: #828282;
    font-family: "Barlow", sans-serif;
    font-size: 1.2rem;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 0.5rem;
}



.image {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(280px, 85vw);
    /* height: 200px;
    object-fit: cover;
    border-radius: 8px; */
}

.imagetitle img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}



/* Styling the gallery buttons */

button {
    padding: 1rem;
    background: blue;
    color: white;
}

/* Filtering the blocks into their respective categories */

#channel-blocks{
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	justify-content: center;
	padding-top: 9px;
}

.image-block, .video-block, .text-block, .link-block{
	background-color: white;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* The cover embedded image for videos */
.video-block iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The cover for image blocks */
.image-block img{
	width: 100%;
	height: 100%;
	max-height: 200px;
	object-fit: fill;
	display:block;
	overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
}



/* Styling text blocks */
.text-block {
    background-color: white; /* dark background like the image */
    color: black;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* aspect-ratio: 1 / 1;  */
    border-radius: 8px;
}

/* The big quotation mark at the top */
.text-block::before {
    content: '\201C'; /* this is the " character */
    font-size: 3rem;
    line-height: 1;
    color: black;
    margin-bottom: 0.5rem;
    font-family: Georgia, serif;
}

.text-block h2 {
    font-size: 0.85rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.text-block p {
    font-size: 0.85rem;
    color: #757575; /* slightly dimmer for the author */
}

.text-block h2, .text-block p {
    font-family: "Libre Baskerville", serif;
}


#channel-blocks:not(.show-images):not(.show-videos):not(.show-links):not(.show-text) .text-block {
    aspect-ratio: 1 / 1.3;
    overflow: hidden;
    position: relative;
}
/* The code above is to have all the text blocks displayed in similar size to the other blcoks only in the "All" section, once filtered, full text content in each block will be displayed */

#channel-blocks:not(.show-images):not(.show-videos):not(.show-links):not(.show-text) .text-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 230px; /* how tall the fade is */
    background:  linear-gradient(to right, transparent, white);
}
/* Got this idea from a friend to make the text blocks look nicer in the "All" section */
/* In the code above, I'm adding a white gradient to hide where the text gets cut off, so the blocks look better and more intentional after I cut the block size ratio only in teh "All" section. */

/* Styling the links button id */
#controls {
	display: flex;
	/* flex-direction: column; */
    /* changed menu idea to hortizonal, row for mobile size for now */
    flex-direction: row;
	gap: 1.5rem;
	padding: 0;
	align-items: center;
    justify-content: center;
    padding-block-start: 2rem;
    padding-block-end: 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: black;
}

/* Styling the links buttons inside the id */
#controls button {
	background: transparent;
	color: #fff;
    font-family: "Inconsolata", monospace;
    font-weight: 500;
    font-size: 1.1rem;
	border: none;
    padding-block-end: 0rem;
    padding: 0rem;
}

/* I wanted to add a wiggle animation when hover to the blocks */
/* I pulled this code from claude.ai */
/* Here the code is using keyframes to tell how the blocks are animated, by rotating from 0deg to 1.5deg. Then add hover in with a 0.3s of wiggle so the blocks wiggle gently */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
}

.image-block:hover, .video-block:hover, .text-block:hover, .link-block:hover {
    animation: wiggle 0.3s ease-in-out infinite;
}

#channel-blocks {

    &.show-images {
        li {
            display: none;
        }
    
        li.image-block {
            display: block;
        }
    }

    &.show-videos {
        li {
            display: none;
        }
    
        li.video-block {
            display: block;
        }
    }

    &.show-links {
        li {
            display: none;
        }
    
        li.link-block {
            display: block;
        }
    }

    &.show-text {
        li {
            display: none;
        }
    
        li.text-block {
            display: block;
        }
    }
}

footer p {
    text-align: center;
    font-family: "Inconsolata", monospace;
    padding: 1rem;
    background-color: transparent;
    color: black;
}


.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: black;
    color: white;
    font-family: "Inconsolata", monospace;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    opacity: 0; /* hidden by default */
    pointer-events: none; /* not clickable when hidden */
    transition: opacity 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto; /* clickable when it's visible */
}
/* JS added the 'visible' class in. The code above is applying style into the button and make it visible to click when JS added 'visible' class in */


.back-to-top-arrow {
    font-size: 1.2rem;
}



#controls button.active {
    text-decoration: underline;
}

/* Adding the style for the scroll animation */
.image-block, .video-block, .text-block, .link-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.image-block.visible, .video-block.visible, .text-block.visible, .link-block.visible {
    opacity: 1;  /* When JS triggers the 'visible' class, the blocks becomes fully visible */
    transform: translateY(0); /* Blocks slide back up to its normal position */
}


@media (min-width: 768px) {

.hero .destinations-column {
    padding: 1rem 3rem;
    padding-block-start: 4rem;
}

.hero .status-column {
    padding: 1rem 12rem;
    padding-block-start: 4rem;
}

.hero .title h1 {
    font-weight: 700;
    font-size: 4rem;
    padding-inline-start: 3rem;
}

.hero .subheader {
    display: flex; 
    font-size: 1.2rem;
    padding: 3rem;
    padding-inline-start: 3rem;
}

.destinations-column ul, .status-column ul, .destinations ul, .status ul {
    font-size: 1rem;
}

.hero .boarding-button {
    padding: 0.5rem 12rem 0.5rem;
}

.hero .arena-link-container {
    font-size: 2rem;
    margin-inline-start: 3rem;/* shifts the whole box to the right */
}

.hero .destinations {
    padding: 1rem 3rem;
}

.hero .status {
    padding: 1rem 12rem;
}

.hero .destinations, .hero .status {
    gap: 1.5rem;
}

.arena-link {
    font-size: 2rem;
}
    
#controls {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
    }
}


@media (min-width: 1280px) {


.hero .destinations-column {
    padding: 1rem 6rem;
    padding-block-start: 4rem;
}

.hero .status-column {
    padding: 1rem;
    padding-block-start: 4rem;
    padding-inline-start: 22rem;
}

.hero .title h1 {
    font-weight: 700;
    font-size: 6rem;
    padding-inline-start: 6rem;
}

.hero .subheader {
    display: flex; 
    padding: 3rem;
    padding-inline-start: 6rem;
    font-size: 1.5rem;
}

.destinations-column ul, .status-column ul, .destinations ul, .status ul, .boarding-button p {
    font-size: 1.2rem;
}

.hero .boarding-button {
    padding: 0.5rem 0.5rem;
    padding-inline-start: 22rem;
}

.hero .arena-link-container {
    margin-inline-start: 6rem;/* shifts the whole box to the right */
}

.arena-link {
    font-size: 2rem;
}

.hero .destinations {
    padding: 1rem 6rem;
    padding-block-start: 4rem;
}

.hero .status {
    padding: 1rem;
    padding-block-start: 4rem;
    padding-inline-start: 22rem;
}

.hero .destinations, .hero .status {
    gap: 1.5rem;
}

.quote {
    font-size: 1.3rem;
}

.quote-more {
        display: block;
    }

.read-more-button {
        display: none;
    }

#controls {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10rem;
    }

#controls button {
    font-size: 1.2rem;
}

#controls button:hover {
    color: #F1B100;
    transition: 0.3s ease; 
}

}