/*
 * Styles for the block-converted pages.
 *
 * These rules are lifted verbatim from the inline `style="..."` attributes that
 * used to live in patterns/hero-home.php, patterns/page-apie.php and
 * patterns/page-parama.php. Core blocks cannot carry arbitrary inline CSS, so
 * the declarations moved here and the blocks carry the class names instead.
 * Visual output is unchanged; the content is now editable in the block editor.
 */

/* ---------- shared ---------- */
.ap-sec { width: 100%; }
.ap-wrap { max-width: 1240px; margin-left: auto; margin-right: auto; }
.ap-wrap--narrow { max-width: 1100px; }

/* Core group blocks default to flow layout; these sections manage their own. */
.ap-sec > .wp-block-group__inner-container,
.ap-grid > .wp-block-group__inner-container { display: contents; }

/* ---------- section 1: hero ---------- */
.ap-hero { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.ap-hero__grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2rem;
    align-items: stretch;
}
.ap-hero__card {
    position: relative;
    overflow: hidden;
    background: #23582D;
    border-radius: 28px;
    padding: 2.25rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 16px 40px rgba(35, 88, 45, 0.22);
}
/* Decorative contour, previously an empty absolutely-positioned <div>. */
.ap-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/bg-template-contour.webp');
    background-size: cover;
    opacity: 0.15;
    pointer-events: none;
}
.ap-hero__card > * { position: relative; z-index: 1; }

.ap-hero__thumb {
    width: 100%;
    margin: 0 0 1.75rem;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.ap-hero__thumb img { width: 100%; height: 140px; object-fit: cover; display: block; }

.ap-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #D5DF5D;
    margin: 0 0 1.25rem;
    text-align: left;
}
.ap-hero__title .ap-hl { color: #FFFFFF; }

.ap-hero__text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    text-align: left;
    max-width: 440px;
}
.ap-hero__cta .wp-block-button__link,
.ap-hero__cta a {
    background: #FFFFFF;
    color: #23582D;
    border-radius: 9999px;
    padding: 0.9rem 2.25rem;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}
.ap-hero__cta a:hover { transform: translateY(-2px); }

.ap-hero__photo {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    min-height: 520px;
    position: relative;
    margin: 0;
}
.ap-hero__photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }

/* ---------- section 2: four feature cards ---------- */
.ap-cards4 { padding-top: 1.5rem; padding-bottom: 3.5rem; }
.ap-cards4__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ap-card {
    position: relative;
    background: #F7F8F5;
    border-radius: 18px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(42, 109, 54, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}
.ap-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07); }
.ap-card__icon { width: 36px; height: 36px; color: #EF5E35; margin: 0; }
.ap-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1F2421;
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
}
.ap-card__title a { color: inherit; text-decoration: none; }
/* Keeps the whole card clickable, as the original <a>-wrapped card was. */
.ap-card__title a::after { content: ""; position: absolute; inset: 0; }
.ap-card__desc { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; line-height: 1.45; }

/* ---------- section 3: three photo cards ---------- */
.ap-cards3 { padding-top: 2rem; padding-bottom: 5rem; text-align: center; }
.ap-cards3__title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 800;
    color: #1F2421;
    margin: 0 auto 3rem;
    max-width: 850px;
    line-height: 1.25;
}
.ap-cards3__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ap-photocard {
    border-radius: 24px;
    overflow: hidden;
    background: #FDF0EC;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
}
.ap-photocard:hover { transform: translateY(-6px); }
.ap-photocard__img { margin: 0; width: 100%; height: 320px; overflow: hidden; }
.ap-photocard__img img { width: 100%; height: 320px; object-fit: cover; display: block; }
.ap-photocard__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F2421;
    margin: 0;
    padding: 1.5rem;
    background: #FDF0EC;
    text-align: left;
    font-family: var(--font-heading);
}

/* ---------- section 4: erasmus banner + stepped bar ---------- */
.ap-banner.wp-block-cover { min-height: 480px; padding: 0; margin: 0; align-items: flex-start; }
.ap-banner .wp-block-cover__inner-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 2rem;
    text-align: center;
}
.ap-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 1.5rem;
}
.ap-banner__cta .wp-block-button__link,
.ap-banner__cta a {
    background: #FFFFFF;
    color: #23582D;
    border-radius: 9999px;
    padding: 0.9rem 2.5rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    display: inline-block;
}
.ap-steps {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 3;
    margin: 0; padding: 0;
    max-width: none;
}
.ap-step {
    flex: 1;
    background: #EF5E35;
    padding: 0.75rem 1.25rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    margin: 0;
}
.ap-step:last-child { border-right: 0; }
.ap-step--1 { height: 60px; }
.ap-step--2 { height: 85px; }
.ap-step--3 { height: 110px; }
.ap-step--4 { height: 135px; }
.ap-step--5 { height: 160px; }
.ap-step__num { font-size: 1.75rem; font-weight: 900; line-height: 1; margin: 0; }
.ap-step__label { font-weight: 700; font-size: 0.875rem; line-height: 1.2; text-align: left; margin: 0; }

/* ---------- section 5: FAQ ---------- */
.ap-faq { padding-top: 4.5rem; padding-bottom: 4.5rem; background: #FAFBF9; }
.ap-faq__head { text-align: left; margin-bottom: 3rem; }
.ap-faq__title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: #23582D;
    margin: 0 0 0.5rem;
}
.ap-faq__lead { color: var(--color-text-muted); font-size: 1.05rem; margin: 0; }
.ap-faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ap-faq__cols > .wp-block-column { display: flex; flex-direction: column; gap: 1rem; }
.ap-faq details.wp-block-details,
.ap-faq .wp-block-details {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(42, 109, 54, 0.1);
    cursor: pointer;
    margin: 0;
}
.ap-faq .wp-block-details summary {
    font-weight: 700;
    color: #1F2421;
    font-size: 1.05rem;
    outline: none;
    list-style: none;
}
.ap-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ap-faq .wp-block-details summary::after {
    content: "⌵";
    float: right;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.ap-faq .wp-block-details p {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}
.ap-faq__more { margin-top: 4rem; text-align: center; }
.ap-faq__more-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F2421;
    margin: 0 0 0.5rem;
}
.ap-faq__more p { color: var(--color-text-muted); margin: 0; }
.ap-faq__more a { color: #23582D; font-weight: 700; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .ap-hero__grid { grid-template-columns: 1fr; }
    .ap-hero__photo, .ap-hero__photo img { min-height: 320px; }
    .ap-cards4__grid { grid-template-columns: repeat(2, 1fr); }
    .ap-cards3__grid { grid-template-columns: 1fr; }
    .ap-faq__cols { grid-template-columns: 1fr; }
    .ap-steps { position: static; flex-wrap: wrap; }
    .ap-step { height: auto !important; min-height: 60px; flex: 1 1 50%; }
}
@media (max-width: 600px) {
    .ap-cards4__grid { grid-template-columns: 1fr; }
    .ap-step { flex: 1 1 100%; }
}

/* ---------- core layout-margin neutraliser (hand-authored sections) ----------
   Core adds `.is-layout-flow > * { margin-block-start: 24px }`. Every container
   below spaces itself with flex/grid `gap`, so that injected margin would be
   added on top of the intended spacing. */
.ap-hero__grid > *,
.ap-hero__card > *,
.ap-cards4__grid > *,
.ap-card > *,
.ap-cards3__grid > *,
.ap-photocard > *,
.ap-steps > *,
.ap-step > *,
.ap-faq__cols > *,
.ap-faq__cols > .wp-block-column > *,
.paremkite-grid > *,
.paremkite-col > *,
.paremkite-field-group > *,
.paremkite-value-box > * { margin-block-start: 0; margin-block-end: 0; }

/* ---------- About page (generated from inline styles) ---------- */
.apg-div-0aa7e994 { display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem; }
.apg-div-220d5ff1 { border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.12);height:580px; }
.apg-div-3e444b1e { max-width:1100px;margin:0 auto;text-align:center; }
.apg-div-44c6b572 { border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.12);height:380px; }
.apg-div-456ddcc6 { max-width:1240px;margin:0 auto; }
.apg-div-481d0d11 { width:32px;height:32px;color:#1F2421;display:flex;align-items:center;justify-content:center; }
.apg-div-48df194d { display:flex;justify-content:center;gap:0.75rem; }
.apg-div-4bc0c3a0 { display:grid;grid-template-columns:1fr 1.15fr;gap:3.5rem;align-items:center; }
.apg-div-4dad774f { position:relative;z-index:1; }
.apg-div-570f15ab { display:grid;grid-template-columns:repeat(3, 1fr);gap:2.5rem;margin-bottom:4.5rem;text-align:center; }
.apg-div-699b313f { width:32px;height:32px;margin:0 auto 1.25rem;color:#EF5E35;display:flex;align-items:center;justify-content:center; }
.apg-div-7d506a15 { background:#FFFFFF;border-radius:20px;padding:2.25rem 1.5rem;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.03);display:flex;flex-direction:column;align-items:center;gap:0.75rem; }
.apg-div-8110b68c { background:#23582D;border-radius:28px;padding:3rem 2.5rem;color:#FFFFFF;display:flex;flex-direction:column;justify-content:center;box-shadow:0 16px 40px rgba(35,88,45,0.22);position:relative;overflow:hidden;min-height:380px; }
.apg-div-8233f316 { display:grid;grid-template-columns:0.95fr 1.05fr;gap:2rem;align-items:stretch; }
.apg-div-83cd3d86 { position:absolute;top:0;right:0;bottom:0;left:0;background-image:url('/wp-content/themes/apglebk/assets/images/bg-template-contour.webp');background-size:cover;opacity:0.15;pointer-events:none; }
.apg-div-85ee13d0 { position:relative;border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.14);background:#1A1A1A; }
.apg-div-8b14cfeb { border-radius:24px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.1);height:260px; }
.apg-div-9434180e { background:#FCEAE3;border-radius:16px;padding:1.5rem 1rem;text-align:center; }
.apg-div-98ce3dbf { display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center; }
.apg-div-9fbb59cc { display:grid;grid-template-columns:repeat(3, 1fr);gap:2.5rem;text-align:center; }
.apg-div-a3b1e616 { display:grid;grid-template-columns:repeat(3, 1fr);gap:1.25rem; }
.apg-div-a560d1b3 { max-width:1240px;margin:0 auto;text-align:center; }
.apg-div-b670d804 { display:flex;flex-direction:column;gap:1.25rem; }
.apg-div-beed0486 { border-radius:28px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.12);min-height:380px; }
.apg-div-c2b1dfe4 { background:#FCEAE3;border-radius:16px;padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.apg-div-c3d0d9bd { display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem; }
.apg-div-fa4ec417 { position:absolute;bottom:2.5rem;right:2.5rem;max-width:540px;background:rgba(0,0,0,0.80);backdrop-filter:blur(12px);border-radius:20px;padding:2.25rem 2.5rem;color:#FFFFFF;border:1px solid rgba(255,255,255,0.15); }
.apg-h1-07a6b709 { font-family:var(--font-heading);font-size:clamp(2.4rem, 4vw, 3.4rem);font-weight:800;line-height:1.15;color:#D5DF5D;margin:0 0 1.5rem;text-align:left; }
.apg-h2-39d7c70d { font-family:var(--font-heading);font-size:2.6rem;font-weight:800;color:#1F2421;margin:0 0 1.5rem; }
.apg-h2-84ac86a7 { font-family:var(--font-heading);font-size:2.5rem;font-weight:800;color:#1F2421;margin:0 0 3.5rem; }
.apg-h2-c0886225 { font-family:var(--font-heading);font-size:2.6rem;font-weight:800;color:#1F2421;margin:0 0 4rem; }
.apg-h2-c1a650ea { font-family:var(--font-heading);font-size:clamp(1.9rem, 3vw, 2.6rem);font-weight:800;color:#1F2421;margin:0 0 3.5rem;max-width:850px;margin-left:auto;margin-right:auto; }
.apg-h2-f3af7625 { font-family:var(--font-heading);font-size:2.6rem;font-weight:800;color:#1F2421;margin:0 0 1.25rem; }
.apg-h3-1b1a0bdc { font-size:1.15rem;font-weight:800;color:#1F2421;margin:0;font-family:var(--font-heading); }
.apg-h3-93dc1dce { font-size:1.25rem;font-weight:800;color:#1F2421;margin:0;font-family:var(--font-heading); }
.apg-img-40e0eaec { width:100%;height:100%;object-fit:cover;display:block; }
.apg-img-6737ccab { width:100%;height:680px;object-fit:cover;object-position:center 10%;display:block; }
.apg-p-0bb785bc { font-size:0.875rem;color:var(--color-text-muted);margin-bottom:0.4rem;line-height:1.45; }
.apg-p-1ec1bd0c { font-size:0.875rem;color:var(--color-text-muted);margin:0;line-height:1.45; }
.apg-p-232ae878 { font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,0.9);margin:0;text-align:left;max-width:460px; }
.apg-p-2c5c84d5 { font-size:2rem;margin-bottom:0.35rem; }
.apg-p-3f1412d3 { font-size:0.95rem;line-height:1.65;color:rgba(255,255,255,0.9);margin:0 0 1.25rem;font-style:italic; }
.apg-p-66708f57 { font-size:1rem;line-height:1.65;color:var(--color-text-muted);margin:0 0 2.25rem; }
.apg-p-8cf0fd2d { font-weight:700;color:#1F2421;margin-bottom:0.75rem;font-size:0.95rem; }
.apg-p-a8d59893 { font-size:1.05rem;line-height:1.7;color:var(--color-text-muted);margin:0; }
.apg-p-b0886272 { font-size:0.825rem;font-weight:700;color:#1F2421;line-height:1.35; }
.apg-p-b35280c1 { font-weight:700;color:#1F2421;margin-bottom:0.5rem;font-size:0.95rem; }
.apg-p-d7d0eb7d { font-weight:700;font-size:1rem;color:#D5DF5D;text-align:right; }
.apg-p-e2d90a5f { font-size:0.825rem;color:var(--color-text-muted);line-height:1.35; }
.apg-p-ee277357 { font-size:2.2rem;font-weight:900;color:#1F2421;margin-bottom:0.35rem;font-family:var(--font-heading); }
.apg-p-f1b363f7 { font-size:0.875rem;color:var(--color-text-muted);line-height:1.5; }
.apg-section-0d6ab989 { padding:6rem 0 5rem;background:#FFFFFF; }
.apg-section-10858258 { background:#EAEFFE;padding:5rem 0; }
.apg-section-4877e25c { padding-top:2rem;padding-bottom:5rem; }
.apg-section-76b75b09 { background:#E6ECE5;padding:5.5rem 0; }
.apg-section-ace649f2 { padding-top:1.5rem;padding-bottom:3rem; }
.apg-section-ad930f7d { padding-top:3rem;padding-bottom:5rem; }
.apg-section-af43b62e { padding:4.5rem 0; }

/* Core's flow layout adds margin-block to children; these containers
   space themselves with gap, so the injected margin would double up. */
.apg-div-0aa7e994 > *,
.apg-div-481d0d11 > *,
.apg-div-48df194d > *,
.apg-div-4bc0c3a0 > *,
.apg-div-570f15ab > *,
.apg-div-699b313f > *,
.apg-div-7d506a15 > *,
.apg-div-8110b68c > *,
.apg-div-8233f316 > *,
.apg-div-98ce3dbf > *,
.apg-div-9fbb59cc > *,
.apg-div-a3b1e616 > *,
.apg-div-b670d804 > *,
.apg-div-c2b1dfe4 > *,
.apg-div-c3d0d9bd > * { margin-block-start: 0; margin-block-end: 0; }

/* ---------- Kaunas guide (generated from inline styles) ---------- */
.apg-h2-b099f1a0 { text-align:left; margin-bottom:0.75rem; }
.apg-p-26163ad4 { margin-top:3.5rem; }
.apg-p-831acaf6 { margin-top:2rem; }
.apg-p-efbcc81b { text-align:left; margin-bottom:1.5rem; }

/* ---------- Events page ----------
   Lifted from the inline styles that were in patterns/page-renginiai.php. */
.ap-events-hero.wp-block-cover { border-radius: 28px; overflow: hidden; padding: 5rem 3rem 6rem; margin-bottom: 3.5rem; box-shadow: 0 16px 40px rgba(0,0,0,0.12); min-height: 0; }
.ap-events-hero .wp-block-cover__inner-container { max-width: 980px; margin: 0 auto; text-align: center; }
.ap-events-hero__title { font-family: var(--font-heading); font-size: clamp(2.4rem, 4.5vw, 3.75rem); font-weight: 900; margin: 0 0 1.25rem; color: #FFFFFF; letter-spacing: -0.5px; }
.ap-events-hero__lead { max-width: 980px; margin: 0 auto 2.5rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.92); font-weight: 400; }

.ap-events-search { max-width: 860px; margin: 0 auto; background: #FFFFFF; border-radius: 20px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); display: flex; align-items: center; padding: 0.6rem 1.25rem; gap: 0.75rem; }
.ap-events-search input[type="search"] { flex: 1; border: none; outline: none; font-size: 1.05rem; color: #1F2421; padding: 0.6rem 0.5rem; background: transparent; }
.ap-events-iconbtn { background: transparent; border: none; cursor: pointer; color: #555; padding: 0.4rem; display: flex; align-items: center; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
.ap-events-iconbtn:hover { background: rgba(0,0,0,0.06); }
#eventSearchBtn { color: #1F2421; }
#eventFilterToggle[aria-expanded="true"] { background: #23582D; color: #FFFFFF; }

/* Visibility is governed solely by the `hidden` attribute the funnel toggles;
   never give this an inline display, or [hidden] stops working. */
.ap-filter-panel { max-width: 860px; margin: 0.85rem auto 0; background: #FFFFFF; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); padding: 1rem 1.25rem; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; }
.ap-filter-panel[hidden] { display: none; }
.ap-filter-panel:not([hidden]) { display: flex; }
.ap-filter-panel select { border: 1.5px solid #DDE1E6; border-radius: 999px; padding: 0.55rem 1rem; font-size: 0.95rem; color: #1F2421; background: #FFFFFF; cursor: pointer; }
#eventFilterReset { background: #F3F4F6; border: none; border-radius: 999px; padding: 0.55rem 1.25rem; font-size: 0.95rem; font-weight: 600; color: #1F2421; cursor: pointer; }
.ap-events-count { margin: 1rem 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.85); }

.ap-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3.5rem; }
.ap-events-grid > * { margin-block-start: 0; margin-block-end: 0; }
.event-card { background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.06); display: flex; flex-direction: column; color: inherit; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.event-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,0,0,0.12); }
.event-card__media { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #EAE5DF; }
.event-card__media a { display: block; width: 100%; height: 100%; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card .bookmark-btn { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: rgba(0,0,0,0.45); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; z-index: 2; }
.event-card__body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.event-card__date { font-size: 0.85rem; color: #6B7280; font-weight: 600; margin-bottom: 0.6rem; }
.event-card__title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: #1F2421; margin: 0 0 0.85rem; line-height: 1.3; }
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__excerpt { font-size: 0.95rem; color: #4B5563; line-height: 1.6; margin: 0 0 1.5rem; flex: 1; }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #F3F4F6; padding-top: 1rem; }
.event-card__share { color: #1877F2; display: inline-flex; align-items: center; transition: transform 0.2s; }
.event-card__share:hover { transform: scale(1.15); }
.event-card__more { color: #23582D; font-weight: 700; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.ap-events-empty { text-align: center; font-size: 1.05rem; color: #4B5563; margin: 0 0 3rem; }

@media (max-width: 960px) { .ap-events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ap-events-grid { grid-template-columns: 1fr; } .ap-events-hero.wp-block-cover { padding: 3rem 1.25rem 3.5rem; } }
.ap-events-main { background: #FAF7F5; min-height: 100vh; padding: 2rem 0 5rem; }
.ap-events-page { max-width: 1320px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== AUTO-GENERATED RESPONSIVE OVERRIDES =====
   Every rule below was lifted from a desktop inline style during block
   conversion, so none of them had a breakpoint. Collapsing multi-column
   grids and capping fixed widths keeps content inside a 402px viewport. */

@media (max-width: 900px) {
  .ap-cards4__grid,
  .apg-div-0aa7e994 { grid-template-columns: repeat(2, 1fr) !important; }
  .ap-cards3__grid,
  .ap-events-grid,
  .apg-div-570f15ab,
  .apg-div-9fbb59cc,
  .apg-div-a3b1e616,
  .apg-div-c3d0d9bd { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .ap-cards3__grid,
  .ap-cards4__grid,
  .ap-events-grid,
  .ap-faq__cols,
  .ap-hero__grid,
  .apg-div-0aa7e994,
  .apg-div-4bc0c3a0,
  .apg-div-570f15ab,
  .apg-div-8233f316,
  .apg-div-98ce3dbf,
  .apg-div-9fbb59cc,
  .apg-div-a3b1e616,
  .apg-div-c3d0d9bd { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
}

/* ===== Footer =====
   The grid, the container and the bottom bar carried inline styles and no
   classes, so none of the theme's responsive rules could reach them and the
   four-column grid stayed four columns at 402px (~190px of overflow). */
.ap-footer-inner { max-width: 1240px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.ap-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
.ap-footer-grid > * { min-width: 0; }
.ap-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.75rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.6);
}
.ap-footer-social { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.ap-footer-legal  { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 900px) {
    .ap-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 600px) {
    .ap-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; margin-bottom: 2.5rem; }
    .ap-footer-bottom { flex-direction: column; align-items: flex-start; }
    .ap-footer-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
    .ap-site-footer { padding: 3rem 0 1.5rem !important; }
}

/* ===== Donate: the bank grid never collapsed ===== */
@media (max-width: 700px) {
    .paremkite-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 1.25rem !important; }
    .paremkite-value-box { padding: 0.9rem 1.1rem !important; }
    .paremkite-value-text { white-space: normal !important; overflow-wrap: anywhere; }
}

/* ===== Header: the 54px logo sat in a 64px bar and overflowed it ===== */
@media (max-width: 600px) {
    .ap-brand--logo-only img { width: 44px !important; height: 44px !important; }
    .ap-navbar { padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; }
}

/* ===== Stop anything escaping the viewport sideways ===== */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* ===== Mobile typography, matched to the Figma mobile frames =====
   apglebk.css caps every h1 at clamp(1.25rem,5vw,1.55rem) !important inside
   @media (max-width:640px), which rendered the hero title at 20px where the
   design calls for 36px. Sizes, line-heights and weights below are taken from
   the Figma mobile node styles (Parkinsans headings, Onest body). */
@media (max-width: 640px) {
    .ap-hero__title {
        font-size: 2.25rem !important;      /* 36px */
        line-height: 2.5rem !important;     /* 40px */
        font-weight: 600 !important;
        font-family: var(--font-heading);
    }
    .ap-hero__text {
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.0625rem !important;  /* 17px */
        font-weight: 400 !important;
    }
    .ap-hero__cta .wp-block-button__link,
    .ap-hero__cta a {
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.1875rem !important;  /* 19px */
        font-weight: 600 !important;
    }
    .ap-cards3__title {
        font-size: 1.5rem !important;       /* 24px */
        line-height: 2.0625rem !important;  /* 33px */
        font-weight: 500 !important;
    }
    .ap-card__title,
    .ap-photocard__title {
        font-size: 1.25rem !important;      /* 20px */
        line-height: 1.75rem !important;    /* 28px */
        font-weight: 600 !important;
    }
    .ap-card__desc {
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.0625rem !important;  /* 17px */
        font-weight: 400 !important;
    }
    .ap-banner__title {
        font-size: 2rem !important;         /* 32px */
        line-height: 2.75rem !important;    /* 44px */
        font-weight: 500 !important;
    }
    .ap-step__label {
        font-size: 1.125rem !important;     /* 18px */
        line-height: 1.5625rem !important;  /* 25px */
        font-weight: 600 !important;
    }
    .ap-faq__title {
        font-size: 1.75rem !important;
        line-height: 2.25rem !important;
        font-weight: 600 !important;
    }
    .ap-events-hero__title,
    .paremkite-heading {
        font-size: 1.875rem !important;     /* 30px */
        line-height: 2.25rem !important;
        font-weight: 600 !important;
    }
}

/* ===== Mobile hero, rebuilt to the Figma mobile frame (402px) =====
   Figma "Pagrindinis" 875:4563 places, relative to the frame:
     green card   x=0   y=100  402x516   (full-bleed, no side margin)
     thumbnail    x=58  y=140  291x112
     title        x=57  y=292  292 wide  36/40 w600
     paragraph    x=57  y=428  292 wide  14/17 w400
     button       x=108 y=535  191 wide
     right photo  x=0   y=636  402x516   (full-bleed)
   The earlier layout-margin reset zeroed the spacing between these, so the
   gaps are restored explicitly here. */
@media (max-width: 640px) {
    .ap-hero { padding-top: 0; padding-bottom: 1.5rem; }
    .ap-hero__grid { gap: 1.25rem; }

    /* full-bleed: cancel the container's side padding */
    .ap-hero__card,
    .ap-hero__photo {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }

    .ap-hero__card {
        padding: 2.5rem 3.4375rem;          /* 40px 55px -> 291px content, matching Figma x=58 */
        justify-content: flex-start;
    }
    .ap-hero__thumb { margin: 0 0 2.5rem; }              /* thumb -> title = 40px */
    .ap-hero__thumb img { height: 112px; }                /* Figma 291x112 */
    .ap-hero__title  { margin: 0 0 1rem !important; }     /* title -> text = 16px */
    .ap-hero__text   { margin: 0 0 2.75rem !important; max-width: none; }

    .ap-hero__cta { display: flex; justify-content: center; }
    .ap-hero__cta .wp-block-button { width: auto; }
    .ap-hero__cta .wp-block-button__link,
    .ap-hero__cta a { display: inline-block; width: auto; padding: 0.875rem 1.75rem; }

    .ap-hero__photo,
    .ap-hero__photo img { min-height: 0; height: 516px; }  /* Figma 402x516 */
    .ap-hero__photo img { object-fit: cover; }
}

/* ===== Desktop hero: full-bleed, matching the Figma desktop frame =====
   In Figma the green card starts at x=0 and the photo runs to x=1440; the live
   build inset both by the section padding. The ancestors are already full
   width, so simply removing the hero's own padding is enough — no 100vw math,
   which would be thrown off by the scrollbar. */
@media (min-width: 961px) {
    .ap-hero { padding-top: 0; padding-left: 0 !important; padding-right: 0 !important; }
    .ap-hero > .ap-wrap,
    .ap-hero .ap-wrap.ap-hero__grid {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0;
    }
    .ap-hero__card {
        border-radius: 0 28px 28px 0;
        /* keep the copy on the 1240px container gutter */
        padding-left: max(2.25rem, calc((100% - 1240px) / 2 + 2.25rem));
        padding-right: 3rem;
    }
    .ap-hero__photo { border-radius: 28px 0 0 28px; }
}

/* ===== Erasmus banner: the stepped bar must sit on the banner floor =====
   core/cover makes .wp-block-cover__inner-container position:relative, so the
   absolutely-positioned step bar resolved against that 238px-tall box and
   landed on top of the heading. Making the inner container static lets it
   resolve against .ap-banner (480px) and sit at the bottom, as in Figma. */
.ap-banner .wp-block-cover__inner-container { position: static; }
.ap-banner { position: relative; }
.ap-banner__title, .ap-banner__cta { position: relative; z-index: 2; }

/* ===== Mobile heading scale, matched to the Figma mobile frames =====
   apglebk.css caps headings inside @media (max-width:640px) with !important:
   h1 -> clamp(1.25rem,5vw,1.55rem), h2 -> 1.4rem, h3 -> 1.25rem. At 402px that
   renders 20/18/17px where the design uses 36/32/24. Measured across the five
   mobile reference frames the scale is:
     36px/50 w600  page titles
     32px/45 w600  major sections
     24px/34 w500  sub-sections
     20px/28 w600  card titles
     18px/25 w600  small headings
   Raised here to match, still clamped so long Lithuanian words cannot overflow. */
@media (max-width: 640px) {
    .entry-content h1,
    .entry-content .section__title,
    .wp-site-blocks h1 {
        font-size: clamp(1.75rem, 9vw, 2.25rem) !important;   /* 28 -> 36px */
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }
    .entry-content h2,
    .wp-site-blocks h2 {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;        /* 24 -> 32px */
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }
    .entry-content h3,
    .wp-site-blocks h3 {
        font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;   /* 20 -> 24px */
        line-height: 1.35 !important;
        font-weight: 600 !important;
    }
    .entry-content h4,
    .wp-site-blocks h4 {
        font-size: 1.25rem !important;                          /* 20px */
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    /* Card titles stay at the design's 20px rather than the section scale. */
    .ap-card__title,
    .ap-photocard__title,
    .event-card__title {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    /* The footer's column headings are Onest in the design, not the display face. */
    .ap-site-footer h1, .ap-site-footer h2, .ap-site-footer h3, .ap-site-footer h4 {
        font-family: var(--font-body) !important;
        font-size: 1.25rem !important;      /* 20px */
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }
}

/* ===== Per-page mobile heading corrections =====
   The generic scale above is right for the About and Guide page titles but
   overshoots elsewhere. Values below are read directly from each mobile frame:
     apie        page title 36/50 w600, section 36/50, sub 32/45, stats 24/34
     renginiai   page title 28/39 w600, event card titles 16/22 w500
     kultura     page title 36/50 w500, sub-headings 24/34
     prisijungti page title 28/34 w700
     pagrindinis photo-card titles 16/22 w600 (not the 20px card scale) */
@media (max-width: 640px) {
    /* Events: page title is 28px here, not the 36px section scale */
    .ap-events-hero__title {
        font-size: 1.75rem !important;      /* 28px */
        line-height: 2.4375rem !important;  /* 39px */
        font-weight: 600 !important;
    }
    /* Events: card titles are 16px in the design, not 20px */
    .event-card__title,
    .event-card__title a {
        font-size: 1rem !important;         /* 16px */
        line-height: 1.375rem !important;   /* 22px */
        font-weight: 500 !important;
    }
    /* Home: photo-card captions are 16px, not the 20px feature-card size */
    .ap-photocard__title {
        font-size: 1rem !important;         /* 16px */
        line-height: 1.375rem !important;   /* 22px */
        font-weight: 600 !important;
    }
    /* Login / register: 28px */
    .page-id-85 .entry-content h1,
    .page-id-86 .entry-content h1,
    .page-id-87 .entry-content h1,
    .page-id-88 .entry-content h1,
    .paremkite-heading {
        font-size: 1.75rem !important;      /* 28px */
        line-height: 2.125rem !important;   /* 34px */
    }
    /* Guide: page title is 36/50 at weight 500 */
    .kaunas-guide-page-wrapper h1,
    .kaunas-heading-page {
        font-size: 2.25rem !important;      /* 36px */
        line-height: 3.125rem !important;   /* 50px */
        font-weight: 500 !important;
    }
    /* Guide: the tab pills are 16px regular */
    .kaunas-nav-pill {
        font-size: 1rem !important;
        line-height: 1.375rem !important;
        font-weight: 400 !important;
    }
}

/* ===== Kaunas guide: restore its own heading scale on mobile =====
   The generic h2/h3 rule above oversized the guide's headings ("Lankytini
   objektai" rendered 32px against the design's 24px, landmark titles 20px
   against 16px). The guide has its own class names, so scope to those. */
@media (max-width: 640px) {
    .kaunas-heading-hero {
        font-size: 2.25rem !important;      /* 36px */
        line-height: 3.125rem !important;   /* 50px */
        font-weight: 500 !important;
    }
    .kaunas-heading-section {
        font-size: 1.5rem !important;       /* 24px */
        line-height: 2.125rem !important;   /* 34px */
        font-weight: 700 !important;
    }
    .kaunas-landmark-title,
    .kaunas-event-title,
    .kaunas-info-card-title,
    .kaunas-work-field-title,
    .kaunas-housing-box-title,
    .kaunas-transport-info-title,
    .kaunas-warning-title {
        font-size: 1rem !important;         /* 16px */
        line-height: 1.375rem !important;   /* 22px */
        font-weight: 600 !important;
    }
}

/* ===== Component heading sizes — specificity fix =====
   The generic rules above use `.entry-content h2/h3` (specificity 0,1,1) while
   the component rules used a single class (0,1,0), so the generic scale won no
   matter the order and card titles stayed at section size. Selectors below are
   doubled to outrank it. Values are from the Figma mobile frames. */
@media (max-width: 640px) {
    .ap-photocard__title.ap-photocard__title {
        font-size: 1rem !important; line-height: 1.375rem !important; font-weight: 600 !important;
    }                                                   /* 16/22 */
    .event-card__title.event-card__title,
    .event-card__title.event-card__title a {
        font-size: 1rem !important; line-height: 1.375rem !important; font-weight: 500 !important;
    }                                                   /* 16/22 */
    .ap-card__title.ap-card__title {
        font-size: 1.25rem !important; line-height: 1.75rem !important; font-weight: 600 !important;
    }                                                   /* 20/28 */
    .ap-cards3__title.ap-cards3__title {
        font-size: 1.5rem !important; line-height: 2.125rem !important; font-weight: 500 !important;
    }                                                   /* 24/34 */
    .ap-faq__title.ap-faq__title {
        font-size: 1.25rem !important; line-height: 1.75rem !important; font-weight: 800 !important;
    }                                                   /* 20/28 */
    .ap-banner__title.ap-banner__title {
        font-size: 2rem !important; line-height: 2.8125rem !important; font-weight: 500 !important;
    }                                                   /* 32/45 */
    .ap-hero__title.ap-hero__title {
        font-size: 2.25rem !important; line-height: 2.5rem !important; font-weight: 600 !important;
    }                                                   /* 36/40 */
    .ap-events-hero__title.ap-events-hero__title {
        font-size: 1.75rem !important; line-height: 2.4375rem !important; font-weight: 600 !important;
    }                                                   /* 28/39 */
    .kaunas-heading-hero.kaunas-heading-hero {
        font-size: 2.25rem !important; line-height: 3.125rem !important; font-weight: 500 !important;
    }                                                   /* 36/50 */
    .kaunas-heading-section.kaunas-heading-section {
        font-size: 1.5rem !important; line-height: 2.125rem !important; font-weight: 700 !important;
    }                                                   /* 24/34 */
    .kaunas-landmark-title.kaunas-landmark-title,
    .kaunas-event-title.kaunas-event-title,
    .kaunas-info-card-title.kaunas-info-card-title,
    .kaunas-work-field-title.kaunas-work-field-title,
    .kaunas-housing-box-title.kaunas-housing-box-title,
    .kaunas-transport-info-title.kaunas-transport-info-title {
        font-size: 1rem !important; line-height: 1.375rem !important; font-weight: 600 !important;
    }                                                   /* 16/22 */
}

/* ===== About page: stat tiles and value cards, per the Figma mobile frame =====
   The blanket "collapse every multi-column grid to one column" was too crude for
   the small stat tiles: the design keeps them three-across at 402px (x=54/156/290).
   Label and card-title sizes are the design's too. */
@media (max-width: 640px) {
    .apg-div-a3b1e616.apg-div-a3b1e616 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }
    .apg-p-e2d90a5f.apg-p-e2d90a5f {
        font-size: 0.625rem !important;     /* 10px */
        line-height: 0.8125rem !important;  /* 13px */
    }
    .apg-h3-1b1a0bdc.apg-h3-1b1a0bdc {
        font-size: 1.125rem !important;     /* 18px */
        line-height: 1.5625rem !important;  /* 25px */
        font-weight: 700 !important;
    }
    /* Section headings on About are 36px in the design, not 32 */
    .entry-content h2,
    .wp-site-blocks h2 {
        font-size: clamp(1.5rem, 9vw, 2.25rem) !important;
    }
}

/* ===== Kaunas guide, mobile: nested padding + body copy =====
   Measured against the Figma mobile EN frame (Drive export, 402x3740):
     body copy  x=21, width 356, left-aligned, ~14px / 20px line-height
   Live was x=67 / width 268 / centred / 16.8px, because five nested groups each
   contributed side padding (10.7 + 24 + 10.7 + 10.7 + 10.7 = 67px a side).
   Collapse the inner levels and keep a single ~20px gutter. */
@media (max-width: 640px) {
    .kaunas-guide-page-wrapper,
    .kaunas-guide-page-wrapper .kaunas-tab-pane,
    .kaunas-guide-page-wrapper .kaunas-subview,
    .kaunas-guide-page-wrapper .kaunas-section-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .kaunas-guide-page-wrapper > .ap-container {
        padding-left: 1.25rem !important;   /* 20px, matching Figma's x=21 */
        padding-right: 1.25rem !important;
    }
    /* Body copy is left-aligned in the design; only headings are centred. */
    .kaunas-lead-paragraph,
    .kaunas-tab-pane p:not(.kaunas-stat-label) {
        text-align: left !important;
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.25rem !important;    /* 20px */
        max-width: none !important;
    }
    .kaunas-section-header { text-align: center !important; }
    .kaunas-section-header .kaunas-lead-paragraph { text-align: left !important; }
}

/* ===== Kaunas guide, mobile: tab pills =====
   Figma (402px frame): the peach band is full-bleed x=0..401 and holds seven
   white pills at x=105, 188x44, stacked one per row on a 52px pitch. Live had
   them wrapping irregularly (2/1/1/1/2) at varying widths. */
@media (max-width: 640px) {
    .kaunas-menu-pills {
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* the pills are split across two rows in the markup; match the pill
           pitch here too so the seam between them is not double-spaced */
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }
    .kaunas-pills-row {
        /* these rows are <p> elements: zero their block margins so the seam
           between the two rows keeps the same 52px pitch as the pills */
        margin: 0 !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important;          /* 52px pitch - 44px pill = 8px */
        width: 100% !important;
    }
    .kaunas-nav-pill {
        width: 188px !important;
        min-height: 44px !important;
        justify-content: center !important;
        padding: 0.6rem 1rem !important;
        flex: 0 0 auto !important;
    }
}

/* The mobile frame draws the nav band as a hard rectangle: measured 402px wide
   on every row from y=100 to y=527, with no taper. Drop the 40px bottom curve
   at mobile widths (desktop keeps it). */
@media (max-width: 640px) {
    .kaunas-curved-banner { border-radius: 0 !important; }
}

/* ===== Auth pages (login / register / forgot password), mobile =====
   Measured against the Figma mobile frames (402x835 login, 402x874 register):
   the form card hugs its content. Live rendered 2114px because `main` carries
   min-height:100vh and the card 64px of vertical padding, leaving ~200px of
   blank above and below the form. The heading is 28px in the design, not 36 —
   these pages render from a pattern, not post-content, so the earlier
   `.entry-content h1` rule never matched them. */
@media (max-width: 640px) {
    .page-id-85 main, .page-id-86 main,
    .page-id-87 main, .page-id-88 main {
        min-height: 0 !important;
    }
    .page-id-85 main > div, .page-id-86 main > div,
    .page-id-87 main > div, .page-id-88 main > div {
        min-height: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }
    .page-id-85 h1, .page-id-86 h1,
    .page-id-87 h1, .page-id-88 h1 {
        font-size: 1.75rem !important;      /* 28px */
        line-height: 2.125rem !important;   /* 34px */
    }
}

/* ===== Plugin auth card (shown on /paskyra/ when logged out) =====
   Styled to the Figma mobile login frame: title, lead, fields, remember/forgot
   row, pill submit, register link. Replaces the old tabbed login/register box,
   which matched nothing in the design. */
.ap-auth-card {
    max-width: 480px; margin: 0 auto; padding: 0 1.25rem;
    font-family: var(--font-body);
}
.ap-auth-card__title {
    font-family: var(--font-heading);
    font-size: 1.75rem; line-height: 2.125rem; font-weight: 700;
    color: #1F2421; margin: 0 0 0.35rem;
}
.ap-auth-card__lead { font-size: 0.95rem; line-height: 1.45; color: #6B7280; margin: 0 0 1.75rem; }
.ap-auth-card__form { display: flex; flex-direction: column; gap: 1.25rem; }
.ap-auth-field label {
    display: block; font-size: 0.9rem; font-weight: 600; color: #4B5563; margin-bottom: 0.4rem;
}
.ap-auth-field input[type="text"],
.ap-auth-field input[type="password"] {
    width: 100%; background: #F0F2F5; border: 1px solid #E5E7EB; border-radius: 10px;
    padding: 0.85rem 1rem; font-size: 1rem; color: #1F2421; outline: none; box-sizing: border-box;
    font-family: inherit;
}
.ap-auth-field input:focus { border-color: #23582D; }
.ap-auth-pwd-wrap { position: relative; }
.ap-auth-pwd-wrap input { padding-right: 3rem !important; }
.ap-auth-pwd-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #6B7280;
    display: flex; align-items: center; padding: 0.25rem;
}
.ap-auth-hint { font-size: 0.8rem; color: #6B7280; margin: 0.4rem 0 0; }
.ap-auth-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.9rem; gap: 1rem; flex-wrap: wrap;
}
.ap-auth-remember { display: inline-flex; align-items: center; gap: 0.5rem; color: #1F2421; cursor: pointer; }
.ap-auth-remember input { width: 17px; height: 17px; accent-color: #23582D; }
.ap-auth-row a { color: #00438F; font-weight: 600; text-decoration: none; }
.ap-auth-submit {
    width: 100%; background: #23582D; color: #FFFFFF; border: none; border-radius: 999px;
    padding: 0.9rem; font-weight: 700; font-size: 1.05rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(35, 88, 45, 0.25); font-family: var(--font-heading);
}
.ap-auth-switch {
    margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid #E5E7EB;
    font-size: 0.95rem; color: #4B5563; text-align: center;
}
.ap-auth-switch a { color: #00438F; font-weight: 700; margin-left: 0.35rem; text-decoration: underline; }

/* ---------- Erasmus preparation stepper ----------
   Five equal columns were set inline with no class rule behind them, so there
   was nothing for a media query to override and the row ran off the side of the
   screen on mobile (18 elements past the viewport at 402px). Same failure the
   footer had: layout in an inline style cannot be made responsive. */
.erasmus-stepper-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .erasmus-stepper-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 520px) {
    .erasmus-stepper-grid { grid-template-columns: 1fr; }
    /* The connecting line between steps only reads horizontally. */
    .erasmus-stepper-grid > div > div[style*="position:absolute"] { display: none; }
}