/* PAGE BASE */
.codebytes-landing-page {
	background:
		radial-gradient(#e5e7eb 1px, transparent 1px),
		linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	background-size: 22px 22px, 100% 100%;
	padding-bottom: 60px;
}


/* HERO */
.codebytes-landing-hero {
   position: relative;
   /*padding: 70px 24px 56px;
   min-height: 300px;*/
   background-image: url('https://readthinkcode.org/wp-content/uploads/2026/04/codebyte-hero.webp');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   overflow: hidden;
   width: 100vw;
   max-width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
   border-radius: 28px;
}


.codebytes-landing-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(
       to right,
       rgba(0,0,0,0.36) 0%,
       rgba(0,0,0,0.18) 45%,
       rgba(0,0,0,0.06) 75%,
       rgba(0,0,0,0.00) 100%
   );
   z-index: 1;
}


.codebytes-landing-hero__content {
   position: relative;
   z-index: 2;
   background: rgba(0, 0, 0, 0.42);
   padding: 28px 30px;
   border-radius: 20px;
   max-width: 720px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}


.codebytes-landing-eyebrow {
   display: inline-block;
   margin-bottom: 12px;
   padding: 7px 13px;
   border-radius: 999px;
   background: rgba(255,255,255,0.16);
   color: #ffffff;
   font-size: 12px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}


.codebytes-landing-title {
   color: #ffffff;
   font-size: clamp(2.2rem, 4vw, 3.3rem);
   line-height: 1.08;
   margin-bottom: 14px;
   text-shadow: 0 3px 10px rgba(0,0,0,0.30);
}


.codebytes-landing-subtext {
   max-width: 700px;
   color: #ffffff;
   font-size: 1.04rem;
   line-height: 1.7;
   text-shadow: 0 3px 10px rgba(0,0,0,0.30);
   margin-bottom: 20px;
}

.explanation {
   border-radius: 22px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* BUTTON */
.codebytes-landing-button .wp-block-button__link {
   background: #111111;
   color: #ffffff;
   padding: 14px 26px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 16px;
   text-decoration: none;
   transition: all 0.25s ease;
}


.codebytes-landing-button .wp-block-button__link:hover {
   background: #2f6f3e;
   transform: translateY(-2px);
}


/* CONTENT */
.codebytes-landing-content {
   margin-top: 38px;
}


/* TOP 3 CARDS */
.codebytes-landing-top-cards {
   gap: 24px;
   margin-bottom: 28px;
}


.codebytes-landing-top-cards .wp-block-column {
   display: flex;
}


.codebytes-landing-card {
   background: #ffffff;
   border-radius: 22px;
   padding: 24px;
   box-shadow: 0 14px 32px rgba(0,0,0,0.08);
   width: 100%;
}


.codebytes-landing-card h3 {
   margin-top: 0;
   margin-bottom: 12px;
}


/* LIBRARY */
.codebytes-library-section {
   margin-top: 10px;
   width: 100%;
}


.codebytes-library-title {
   margin-bottom: 10px;
}


.codebytes-library-subtext {
   max-width: 700px;
   margin: 0 auto 26px;
   color: #4b5563;
}


/* 🔥 CRITICAL FIX — FORCE 3-COLUMN GRID */
.wp-block-columns.codebytes-library-row {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   gap: 28px !important;
   margin-top: 28px !important;
   margin-bottom: 0 !important;
   width: 100% !important;
   max-width: none !important;
}


/* REMOVE GUTENBERG COLUMN BEHAVIOR */
.wp-block-columns.codebytes-library-row > .wp-block-column {
   margin: 0 !important;
   min-width: 0 !important;
   width: 100% !important;
   flex: none !important;
}


/* CARDS */
.codebytes-lesson-card {
   background: #ffffff;
   border-radius: 22px;
   padding: 26px;
   box-shadow: 0 16px 36px rgba(0,0,0,0.08);
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
}


.codebytes-lesson-card--coming-soon {
   opacity: 0.92;
}


/* BADGE */
.codebytes-lesson-badge, .codebytes-lesson-badge-free {
   display: inline-block;
   margin-bottom: 14px;
   padding: 6px 14px;
   border-radius: 999px;
   background: #eef6ff;
   color: #1e5a8a;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   text-align: center;
}

.codebytes-lesson-badge-free {
   background: #E9FCE9;
}


/* TITLE */
.codebytes-lesson-title {
   font-size: 1.5rem;
   line-height: 1.15;
   text-align: center;
}


/* TEXT */
.codebytes-lesson-text {
   font-size: 15.5px;
   line-height: 1.7;
   color: #4b5563;
   margin-bottom: 20px;
   flex-grow: 1;
}


/* BUTTON FIX */
.codebytes-card-button {
   margin-top: 0;
   display: flex;
	justify-content: center;
}


.codebytes-card-button .wp-block-button__link {
   background: #111111;
   color: #ffffff;
   padding: 12px 22px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 15px;
   text-decoration: none;
   display: inline-block;
   white-space: nowrap;
   transition: all 0.25s ease;
}


.codebytes-card-button .wp-block-button__link:hover {
   background: #2f6f3e;
   transform: translateY(-2px);
}


/* CTA */
.codebytes-membership-cta {
   margin-top: 36px;
   padding: 36px 28px;
   border-radius: 24px;
   background: #ffffff;
   text-align: center;
   box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}


.codebytes-membership-cta p {
   max-width: 720px;
   margin: 0 auto 22px;
   line-height: 1.7;
}


/* RESPONSIVE */
@media (max-width: 900px) {
   .wp-block-columns.codebytes-library-row {
       grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
}


@media (max-width: 640px) {
   .wp-block-columns.codebytes-library-row {
       grid-template-columns: 1fr !important;
   }
}


@media (max-width: 781px) {
   .codebytes-landing-hero {
       padding: 48px 20px 40px;
       min-height: 240px;
   }


   .codebytes-landing-hero__content {
       padding: 20px 18px;
       border-radius: 16px;
   }


   .codebytes-landing-title {
       font-size: 2rem;
   }


   .codebytes-landing-subtext {
       font-size: 0.98rem;
   }


   .codebytes-landing-card,
   .codebytes-lesson-card,
   .codebytes-membership-cta {
       padding: 20px 18px;
   }
}