/*
 * ŠkVP – prihlasovacia (úvodná) stránka vo vzhľade „Škola" (rovnaký ako vnútro
 * aplikácie, viď skvp-skola.css): tabuľa v drevenom ráme, prihlásenie na strane
 * zo zošita, papieriky na nástenke. Tokeny (navy…) sú v skvp.css.
 */
:root {
    --red: #c8102e;
    --chalk: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
    --board-1: #1d4d45;
    --board-2: #173f39;
    --board-3: #12332e;
    --wood: linear-gradient(135deg, #b27c4b, #7d522c 40%, #a26f42 70%, #6e4726);
}

body.guest-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0b1b30;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Hlavička (biela, sklenená) ---------- */
.guest-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.guest-header .navbar-brand img { max-height: 44px; width: auto; }
.guest-brand-sub {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}
.guest-header-links { display: flex; align-items: center; gap: 4px; }
.guest-header-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #475569;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.guest-header-links a:hover { background: var(--primary-soft); color: var(--navy); }

/* štvorčekový zošit na celej stránke */
body.guest-body {
    background-color: #f7f9fc !important;
    background-image:
        linear-gradient(rgba(36, 91, 150, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 91, 150, .07) 1px, transparent 1px) !important;
    background-size: 26px 26px !important;
}

/* navigačný pás pod hlavičkou – ako vo vnútri aplikácie */
.gs-band {
    height: 10px;
    background: var(--navy);
    box-shadow: inset 0 -3px 0 var(--red);
}

.gs-hero { padding: 48px 0 30px; }
.gs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 420px);
    gap: 48px;
    align-items: center;
}

/* ---------- Tabuľa ---------- */
.gs-board {
    position: relative;
    isolation: isolate;
    padding: 44px 44px 64px;
    color: #eef4f1;
    background:
        radial-gradient(600px 260px at 30% 10%, rgba(255, 255, 255, .07), transparent 70%),
        linear-gradient(160deg, var(--board-1) 0%, var(--board-2) 55%, var(--board-3) 100%);
    border: 16px solid #9a6a3f;
    border-image: var(--wood) 1;
    box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .65), inset 0 0 70px rgba(0, 0, 0, .35);
    animation: gs-rise .7s cubic-bezier(.22, 1, .36, 1) both;
}
/* kriedové pomôcky */
.gs-board::before {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 40px;
    width: 46%;
    height: 60%;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 180' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.22'%3E%3Cpath d='M20 170 L100 50 L100 170 Z'/%3E%3Cpath d='M86 170 v-14 h14'/%3E%3Ccircle cx='180' cy='100' r='32'/%3E%3Ccircle cx='180' cy='100' r='10'/%3E%3Cpath d='M180 60 v-8 M180 148 v-8 M140 100 h-8 M228 100 h-8 M152 72 l-6 -6 M214 134 l-6 -6 M208 72 l6 -6 M146 134 l6 -6'/%3E%3Cpath d='M230 40 l12 12 M242 40 l-12 12'/%3E%3Cpath d='M250 170 l30 -110 l14 4 l-30 110 z'/%3E%3Cpath d='M258 142 l6 2 M264 120 l6 2 M270 98 l6 2 M276 76 l6 2'/%3E%3C/svg%3E") no-repeat right bottom / contain;
}
/* kriedová lišta s kúskami kriedy a hubkou */
.gs-board::after {
    content: "";
    position: absolute;
    left: 40px;
    bottom: 14px;
    width: 52px;
    height: 11px;
    border-radius: 3px;
    background: #f4f1e8;
    box-shadow: 66px 0 0 -1px #f7c6cf, 150px -3px 0 3px #8a6a4a, 0 2px 4px rgba(0, 0, 0, .35);
}
.gs-board-date { font-family: var(--chalk); font-size: 22px; color: #f7d98b; margin-bottom: 6px; }
.gs-board h1 {
    font-family: var(--chalk);
    font-weight: 700;
    font-size: clamp(40px, 1.6rem + 3vw, 68px);
    line-height: 1;
    color: #f7f5ee;
    text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 14px rgba(255, 255, 255, .15);
    margin: 0 0 18px;
}
.gs-board h1 .u {
    /* podčiarknuté kriedou */
    background: linear-gradient(transparent 82%, rgba(255, 143, 161, .75) 82%, rgba(255, 143, 161, .75) 90%, transparent 90%);
}
.gs-board p {
    font-family: var(--chalk);
    font-size: 25px;
    line-height: 1.3;
    color: #dfe9e4;
    max-width: 30ch;
    margin: 0;
}
.gs-board-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 6px; }
.gs-board-list li { font-family: var(--chalk); font-size: 23px; color: #eef4f1; display: flex; align-items: center; gap: 10px; }
.gs-board-list li::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7d98b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 L6.5 12 L13 4'/%3E%3C/svg%3E") center / 14px no-repeat;
    flex: none;
}

/* ---------- Prihlasovacia karta ako strana zo zošita ---------- */
.gs-page {
    position: relative;
    padding: 38px 32px 30px 70px;
    background:
        linear-gradient(90deg, transparent 50px, rgba(200, 16, 46, .45) 50px, rgba(200, 16, 46, .45) 52px, transparent 52px),
        repeating-linear-gradient(#fff 0 27px, #dbe6f3 27px 28px);
    border: 1px solid #dfe6ef;
    border-radius: 6px 18px 18px 6px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .06),
        7px 7px 0 -1px #fff, 7px 7px 0 0 #dde5ef,
        0 40px 60px -34px rgba(22, 58, 99, .55);
    transform: rotate(.6deg);
    animation: gs-rise .7s cubic-bezier(.22, 1, .36, 1) .12s both;
}
/* krúžková väzba */
.gs-page::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 16px;
    width: 16px;
    background: radial-gradient(circle at 8px 8px, #cfd8e3 6px, transparent 6.5px) 0 0 / 16px 30px repeat-y;
}
/* kúsok pásky */
.gs-page::after {
    content: "";
    position: absolute;
    top: -11px;
    right: 44px;
    width: 86px;
    height: 22px;
    transform: rotate(4deg);
    background: rgba(255, 243, 166, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.gs-page h2 {
    font-family: var(--chalk);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--navy);
    margin: 0 0 6px;
}
.gs-page .sub { color: #475569; font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }

.gs-btn-ms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--navy);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--red);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.gs-btn-ms:hover { background: var(--navy2); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); }
.gs-btn-ms:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 rgba(200, 16, 46, .5); }
.gs-ms-logo { display: grid; grid-template-columns: 9px 9px; gap: 2px; }
.gs-ms-logo span { width: 9px; height: 9px; display: block; }

/* rada ako žltý papierik */
.gs-note {
    position: relative;
    margin: 22px 0 0 -6px;
    padding: 14px 16px 12px;
    background: #fff3a6;
    color: #4a4217;
    font-size: 13.5px;
    line-height: 1.5;
    transform: rotate(-1.2deg);
    box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .45);
}
.gs-note b { font-family: var(--chalk); font-size: 20px; display: block; line-height: 1; margin-bottom: 4px; }

.gs-divider { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.gs-divider::before, .gs-divider::after { content: ""; flex: 1; border-top: 1.5px dashed #c3d0e0; }
.gs-divider button { background: none; border: 0; color: #64748b; font-size: .82rem; cursor: pointer; }
.gs-divider button:hover { color: var(--navy); text-decoration: underline; }

.gs-mail { margin-top: 16px; }
.gs-mail .form-label { font-weight: 700; font-size: .86rem; color: var(--navy); margin-bottom: 4px; }
.gs-mail .form-control { border: 1.5px solid #c9d6e6; border-radius: 10px; background: #fff; }
.gs-mail .form-control:focus { border-color: var(--navy2); box-shadow: 0 0 0 3px rgba(36, 91, 150, .15); }
.gs-mail .btn-primary { border-radius: 10px; font-weight: 700; }

.gs-alert { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; line-height: 1.5; border-left: 4px solid; background: #fff; }
.gs-alert-danger { border-color: var(--red); color: #8c1d2c; background: #fdecee; }
.gs-alert-warning { border-color: #c98a12; color: #7a4d0b; background: #fff7e6; }

/* ---------- Čo tu nájdete – papieriky na nástenke ---------- */
.gs-board-section { padding: 26px 0 80px; }
.gs-section-title { font-family: var(--chalk); font-size: 40px; font-weight: 700; color: var(--navy); margin: 0 0 20px; }
.gs-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gs-postit {
    position: relative;
    padding: 26px 20px 20px;
    min-height: 190px;
    background: #fff7c2;
    color: #3b3413;
    box-shadow: 0 16px 22px -14px rgba(0, 0, 0, .45);
    transform: rotate(-1.5deg);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.gs-postit:nth-child(2) { background: #dcebfb; transform: rotate(1.2deg); color: #16335a; }
.gs-postit:nth-child(3) { background: #ffd6de; transform: rotate(-.6deg); color: #5a1624; }
.gs-postit:nth-child(4) { background: #d9f3e3; transform: rotate(1.6deg); color: #14432b; }
.gs-postit:hover { transform: rotate(0) translateY(-6px); }
/* špendlík */
.gs-postit::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8fa1, var(--red) 70%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.gs-postit i { font-size: 28px; display: block; margin: 6px 0 8px; opacity: .8; }
.gs-postit h3 { font-family: var(--chalk); font-size: 28px; font-weight: 700; line-height: 1; margin: 0 0 8px; }
.gs-postit p { font-size: 13.5px; line-height: 1.55; margin: 0; opacity: .85; }

/* ---------- Pätička ---------- */
.guest-footer {
    background: rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(15, 23, 42, .06);
    color: #94a3b8;
    font-size: 13px;
    padding: 18px 0;
    margin-top: auto;
}
.guest-footer a { color: #64748b; text-decoration: none; }
.guest-footer a:hover { color: var(--navy); text-decoration: underline; }

@keyframes gs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gs-board, .gs-page { animation: none; } }

@media (max-width: 991.98px) {
    .gs-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .gs-page { max-width: 480px; width: 100%; margin: 0 auto; transform: none; order: -1; }
    .gs-board-list { display: none; }
    .gs-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .gs-board { padding: 26px 22px 50px; border-width: 10px; }
    .gs-board::before { display: none; }
    .gs-page { padding: 30px 20px 24px 54px; }
    .gs-page::before { left: 10px; }
    .gs-page { background:
        linear-gradient(90deg, transparent 40px, rgba(200, 16, 46, .45) 40px, rgba(200, 16, 46, .45) 42px, transparent 42px),
        repeating-linear-gradient(#fff 0 27px, #dbe6f3 27px 28px); }
    .gs-notes { grid-template-columns: 1fr; }
}