/* ── TBC Challenge Worksheets Block ── */

.tbc-cw-section {
    position: relative;
    background: var(--tbc-color-black);
    color: #ffffff;
    padding-block: var(--space-80-40);
    overflow: hidden;
}
@media (min-width: 1200px) {
    .tbc-cw-section .tbc-container{
        max-width: 1026px;
        padding-inline: 0;
    }
}

.tbc-cw-header {
    margin-bottom: var(--space-80-40);
}

.tbc-cw-eyebrow {
    font-family: var(--tbc-font-body);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: currentColor;
    margin: 0 0 1.5rem;
}

.tbc-cw-title {
    font-family: var(--tbc-font-heading);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.25;
    color: currentColor;
    margin: 0 0 1rem;
}

.tbc-cw-subtext {
    font-family: var(--tbc-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ── Grid ── */
.tbc-cw-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: var(--space-60-24);
    row-gap: 1.5rem;
}

.tbc-cw-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 10px;
    border: 0.5px solid #FFFFFF70;
    box-shadow: 0px 0px 10px 0px #00000026;
}

.tbc-cw-card__avatar {
    position: absolute;
    top: -14px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tbc-color-black);
    display: block;
}

.tbc-cw-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tbc-cw-card__number {
    flex-shrink: 0;
    width: 78px;
}

@media (min-width: 1200px){
	.tbc-cw-card__number {
    	width: 120px;
	}	
}

.tbc-cw-card__number img {
    width: 100%;
    height: auto;
    display: block;
}

.tbc-cw-card__body {
    min-width: 0;
    flex: 1 1 0%;
}

.tbc-cw-card__title {
    font-family: var(--tbc-font-heading);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.25;
    color: currentColor;
    margin: 0 0 0.5rem;
}

.tbc-cw-card__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tbc-cw-card__count {
    font-family: var(--tbc-font-body);
    font-size: 1rem;
    color: var(--tbc-color-white);
    /* margin-bottom: .25rem; */
}

.tbc-cw-download {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: #FFD3FF;
    color: var(--tbc-color-black);
    border: none;
    border-radius: 50px;
    font-family: var(--tbc-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: .25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.tbc-cw-download:hover {
    opacity: 0.85;
}

/* .tbc-cw-card__meta's justify-content:space-between only spreads items
   that share a flex LINE — if the button wraps to its own line (the count
   text + button together exceed the row's width, e.g. Chapter 4's longer
   "11 Exercises"), a lone wrapped item collapses to flex-start (left)
   instead of staying right-aligned. margin-left:auto keeps it pinned to
   the end of whichever line it ends up on. */
.tbc-cw-card__meta .tbc-cw-download {
    margin-left: auto;
}

.tbc-cw-download.is-disabled {
    cursor: not-allowed;
}

/* ── Decorative note + arrow ── */
.tbc-cw-note-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 47%;
    margin-left: auto;
    margin-top: -130px;
}

.tbc-cw-arrow {
    width: 14vw;
    position: absolute;
    right: 0;
    bottom: calc(var(--space-80-40) + var(--space-80-40));
}

.tbc-cw-arrow img {
    width: 100%;
    height: auto;
    display: block;
}

.tbc-cw-note {
    width: 100%;
}

.tbc-cw-note img {
    width: 100%;
    height: auto;
    display: block;
}

/* Reveal hidden/from state is applied by script.js via gsap.set() rather than
   baked in here statically — that way, if GSAP never loads (e.g. the WP block
   editor canvas only loads frontend scripts on the live site), these elements
   simply stay visible instead of being stuck at opacity:0. */
.tbc-cw-note img {
    transform-origin: center;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tbc-cw-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

    .tbc-cw-card {
        gap: 1rem;
        padding: 1.25rem;
    }

    .tbc-cw-note-wrap {
        max-width: 200px;
        margin-top: var(--space-40-20);
        margin-inline: auto;
    }
}

/* ── Download gate modal ── */
.tbc-cw-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
}

.tbc-cw-gate[hidden] {
    display: none;
}

.tbc-cw-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.tbc-cw-gate__close {
    position: absolute;
    top: var(--space-40-20);
    right: var(--space-40-20);
    z-index: 1;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #ffffff;
}

.tbc-cw-gate__inner {
    position: relative;
    width: 100%;
}

.tbc-cw-gate__panel {
    max-width: 40rem;
    color: #ffffff;
    margin-inline: auto;
}
.tbc-cw-gate__panel form{
    max-width: 25rem;
}

.tbc-cw-gate__title {
    --fs-64-32: clamp(2rem, -0.286rem + 4.762vw, 4rem);
    font-family: var(--tbc-font-body);
    font-size: var(--fs-64-32);
    font-weight: 900;
    text-transform: none;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.tbc-cw-gate__subtext {
    font-family: var(--tbc-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    color: var(--tbc-color-white);
    margin: 0 0 2rem;
}

.tbc-cw-gate__field {
    margin-bottom: 1.5rem;
}

.tbc-cw-gate__field label {
    display: block;
    font-family: var(--tbc-font-body);
    font-size: 0.85rem;
    color: var(--tbc-color-white);
    margin: 0 0 0.5rem;
}

[data-tbc-cw-gate-form] input {
    width: 100%;
    font-family: var(--tbc-font-body);
    font-size: 1rem;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid var(--tbc-color-white);
    border-radius: 0;
    background: transparent;
    color: #ffffff;
}

[data-tbc-cw-gate-form] input::placeholder {
    color: #D9D9D980;
    /* opacity: 50%; */
}

[data-tbc-cw-gate-form] input:focus {
    outline: none;
    border-bottom-color: var(--tbc-pink);
}

.tbc-cw-gate__error {
    font-family: var(--tbc-font-body);
    font-size: 0.85rem;
    color: #ff6b6b;
    margin: -0.75rem 0 1.5rem;
}

.tbc-cw-gate__submit {
    justify-content: center;
    gap: 0.6rem;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
}

.tbc-cw-gate__submit svg {
    width: 16px;
    height: 16px;
}

.tbc-cw-gate__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 1300px) {
    .tbc-cw-note-wrap{
        width: 33%;
    }
    .tbc-cw-arrow {
        width: 10vw;
        bottom: var(--space-80-40);
    }
}
@media (max-width: 767.98px) {
    .tbc-cw-card__number{
        width: 80px;
    }
    .tbc-cw-note-wrap{
        width: 100%;
        max-width: 300px;
    }
    .tbc-cw-arrow {
        width: 20vw;
        bottom: 10vw;
    }

}