/* English But Better — A1 Writing hub (writing/a1/*). Generated pages use .wa-* classes. */

/* ---------- hub ---------- */
.wa-stage { margin: 34px 0 10px; }
.wa-stage:first-of-type { margin-top: 6px; }
.wa-stage h2 { font-size: 1.35rem; margin: 0 0 4px; }
.wa-stage p { margin: 0 0 14px; color: var(--text-light); }
.wa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wa-card { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s; }
a.wa-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); }
.wa-card-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: .9rem; }
.wa-card h3 { font-size: 1.05rem; margin: 4px 0 0; color: var(--black); }
.wa-card p { font-size: .88rem; color: var(--text-light); margin: 0; flex: 1; }
.wa-card-tag { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-top: 6px; }
.wa-soon { background: var(--gray-light); border-style: dashed; }
.wa-soon .wa-card-num { background: var(--gray-mid); color: var(--text-light); }
.wa-soon .wa-card-tag { color: var(--text-light); }

/* ---------- lesson page ---------- */
.wa-body h2 { font-size: 1.55rem; line-height: 1.25; font-weight: 700; margin: 58px 0 16px; padding-top: 30px; border-top: 2px solid var(--gray-mid); scroll-margin-top: calc(var(--nav-h, 80px) + 16px); }
.wa-body h2:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
@media (max-width: 560px) { .wa-body h2 { font-size: 1.3rem; margin-top: 36px; padding-top: 20px; } }
.wa-body ul, .wa-body ol { margin: 8px 0 8px 22px; }
.wa-body li { margin-bottom: 6px; line-height: 1.6; }
.wa-meta { font-size: .85rem; color: var(--text-light); }

.wa-model { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 12px; padding: 18px 20px; }
.wa-model-title { font-weight: 700; margin-bottom: 10px; }
.wa-part { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px dashed var(--gray-mid); }
.wa-part:first-of-type { border-top: none; }
.wa-part-label { flex: 0 0 150px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.wa-part-text { flex: 1; font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 560px) { .wa-part { flex-direction: column; gap: 2px; } .wa-part-label { flex-basis: auto; } }

.wa-table-wrap { overflow-x: auto; }
.wa-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.wa-table th, .wa-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--gray-mid); vertical-align: top; }
.wa-table th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-light); }
.wa-table td:first-child { font-weight: 600; }

.wa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.wa-chip { background: var(--white); border: 1px solid var(--gray-mid); border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
.wa-starters li { font-family: inherit; }

.wa-checklist { list-style: none; margin-left: 0 !important; padding: 0; }
.wa-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.wa-checklist input { margin-top: 5px; width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- exercises ---------- */
.wa-ex { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 12px; padding: 22px; margin-top: 4px; }
.ex-box .wa-ex { background: none; border: none; padding: 0; }
.wa-ex-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.wa-ex .ex-desc { margin-bottom: 14px; }
.wa-item { margin-bottom: 18px; }
.wa-q { font-weight: 500; line-height: 1.65; margin-bottom: 8px; }
.wa-num { font-weight: 700; color: var(--blue); margin-right: 6px; }
.wa-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-opt { font-family: inherit; font-size: .95rem; background: var(--white); color: var(--text); border: 2px solid var(--gray-mid); border-radius: 999px; padding: 6px 16px; cursor: pointer; transition: border-color .12s, background .12s; }
.wa-opt:hover { border-color: var(--blue); }
.wa-opt.wa-pick { border-color: var(--blue); background: var(--blue-light); }
.wa-opt.opt-correct { border-color: var(--green); background: #E8F8EE; color: #1b6b3d; }
.wa-opt.opt-user-wrong { border-color: var(--red); background: #FDECEA; color: #a8281c; }
.wa-wrong-line { display: inline-block; background: #FFF4F2; border: 1px solid #F3C9C4; border-radius: 8px; padding: 4px 12px; margin-bottom: 8px; font-size: 1.02rem; }
.wa-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wa-tile { background: var(--white); border: 2px solid var(--gray-mid); border-radius: 10px; padding: 4px 12px; font-size: 1rem; }
.wa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wa-item .ex-input { min-width: 180px; font-size: 1rem; }
.wa-item .wa-short { min-width: 0; width: 64px; text-align: center; }
.wa-select { font-family: inherit; font-size: .95rem; padding: 6px 10px; border: 2px solid var(--gray-mid); border-radius: 8px; background: var(--white); max-width: 100%; }
.wa-select.input-correct { border-color: var(--green); background: #E8F8EE; }
.wa-select.input-wrong { border-color: var(--red); background: #FDECEA; }
.wa-why { display: none; margin-top: 8px; font-size: .88rem; color: var(--text-light); }
.wa-checked .wa-answered .wa-why { display: block; }
.wa-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.wa-actions .check-btn { margin-top: 0; }
.wa-clear { font-family: inherit; font-size: .9rem; font-weight: 600; background: var(--white); color: var(--text); border: 2px solid var(--gray-mid); border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.wa-clear:hover { border-color: var(--blue); color: var(--blue); }
.wa-ex .ex-score { margin-top: 0; }

/* ---------- theory lessons (A2 and up) ---------- */
.wa-key { background: #FFF8E1; border: 1px solid #F3D88A; border-left: 5px solid #F5A623; border-radius: 10px; padding: 14px 18px; margin-bottom: 8px; }
.wa-key strong { color: #B26A00; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.wa-key p { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.6; }
.wa-sample { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 10px; padding: 12px 16px; margin: 10px 0; }
.wa-sample-text { font-size: 1.02rem; line-height: 1.65; }
.wa-sample-text p { margin: 0 0 6px; }
.wa-sample-note { margin-top: 6px; font-size: .86rem; color: var(--text-light); }
.wa-mistakes { display: grid; gap: 12px; }
.wa-mistake { border: 1px solid var(--gray-mid); border-radius: 10px; padding: 12px 16px; background: var(--white); }
.wa-mistake-wrong { color: #a8281c; text-decoration: line-through; text-decoration-color: rgba(168,40,28,.45); }
.wa-mistake-right { color: #1b6b3d; font-weight: 600; margin-top: 2px; }
.wa-mistake-why { margin-top: 6px; font-size: .88rem; color: var(--text-light); }
.wa-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wa-twocol h3 { font-size: 1rem; margin: 0 0 4px; color: var(--blue); }
@media (max-width: 640px) { .wa-twocol { grid-template-columns: 1fr; } }

/* ---------- layout polish (all Writing lesson pages): cards, steps, centred tiles, handwriting for examples ---------- */
.wa-body p { line-height: 1.7; }
.wa-exs { font-family: 'Patrick Hand', cursive; font-size: 1.2rem; }
.wa-sample { border-left: 5px solid #8B6CF6; border-radius: 10px; margin: 16px 0; padding: 14px 18px; }
.wa-sample-text { line-height: 1.6; }

/* theory section = one card */
.wa-sec { border: 1px solid var(--gray-mid); border-radius: 14px; padding: 4px 26px 22px; margin: 34px 0; background: var(--white); }
.wa-body .wa-sec h2 { margin: 22px 0 14px; padding-top: 0; border-top: none; }
.wa-sec ul { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wa-sec ul li { flex: 0 1 calc(50% - 6px); min-width: 220px; box-sizing: border-box; margin: 0; background: var(--gray-light); border-radius: 12px; padding: 14px 16px; text-align: center; line-height: 1.55; font-size: .96rem; }

/* "What you need to know" / "What to include" = centred tiles */
#what-to-know + ul, #what-to-include + ul { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#what-to-know + ul li, #what-to-include + ul li { flex: 0 1 calc(50% - 6px); min-width: 220px; box-sizing: border-box; margin: 0; background: var(--gray-light); border-radius: 12px; padding: 14px 16px; text-align: center; line-height: 1.55; font-size: .96rem; }

/* step-by-step list = numbered cards with big circles */
#how-to-organise-it + ol { list-style: none; counter-reset: wa-step; margin: 18px 0; padding: 0; }
#how-to-organise-it + ol li { counter-increment: wa-step; display: flex; align-items: center; gap: 16px; border: 1px solid var(--gray-mid); border-radius: 12px; padding: 14px 18px; margin: 0 0 12px; background: var(--white); line-height: 1.6; }
#how-to-organise-it + ol li::before { content: counter(wa-step); flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3B9AE1, #1E6FBF); color: #fff; font-size: 1.6rem; font-weight: 800; box-shadow: 0 4px 10px rgba(30,111,191,.3); }

/* key language table = light-blue box, equal columns, handwriting for the examples */
#key-language + .wa-table-wrap { background: #E8F4FD; border: 1px solid #9CCBEF; border-left: 5px solid #3B9AE1; border-radius: 10px; padding: 10px 12px; color: #1B2A3A; margin-top: 14px; }
#key-language + .wa-table-wrap .wa-table { table-layout: fixed; width: 100%; background: transparent; }
#key-language + .wa-table-wrap .wa-table th { color: #4A6580; }
#key-language + .wa-table-wrap .wa-table td:nth-child(n+2) { font-family: 'Patrick Hand', cursive; font-size: 1.2rem; }

/* common mistakes = centred cards in two columns */
.wa-mistakes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 18px; }
.wa-mistakes .wa-mistake { flex: 0 1 calc(50% - 8px); min-width: 260px; box-sizing: border-box; margin: 0; text-align: center; }

/* plan / check = two cards */
.wa-twocol > div { border: 1px solid var(--gray-mid); border-radius: 14px; padding: 16px 22px; background: var(--white); }