/* Public website — the school's front-facing marketing site. Layered on top
   of the same --color-* tokens app.css defines (so it automatically matches
   whichever of the four Master Settings themes the school picked) with its
   own editorial typography and layout, distinct from the admin app's dense
   utilitarian chrome. Every derived --pub-* tint below is computed FROM the
   school's chosen accent colour via color-mix(), so it stays correct across
   all four themes without hard-coding a fixed palette. */

:root {
    --pub-font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, 'Noto Serif', serif;
    --pub-tint: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    --pub-tint-strong: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    --pub-hero-a: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
    --pub-hero-b: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
    --pub-line: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.public-body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.public-body h1,
.public-body h2,
.public-body h3 {
    font-family: var(--pub-font-display);
    font-weight: 600;
    text-wrap: balance;
    line-height: 1.2;
    color: var(--color-text);
}

/* ---------- Header ---------- */

.public-header {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.public-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.1rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.public-brand {
    font-family: var(--pub-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.public-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-inline-start: auto;
}

.public-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}

.public-nav a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.public-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- Hero ---------- */

.public-hero {
    text-align: center;
    padding: 5rem 1.5rem 7rem;
    background:
        radial-gradient(ellipse 60% 80% at 15% -10%, var(--pub-hero-a), transparent),
        radial-gradient(ellipse 50% 70% at 100% 0%, var(--pub-hero-a), transparent),
        var(--pub-hero-b);
    border-bottom: 1px solid var(--color-border);
}

.public-hero .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.public-hero h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    margin: 0 0 1rem;
    max-width: 18ch;
    margin-inline: auto;
}

.public-hero p {
    max-width: 56ch;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: 1.15rem;
}

.public-hero-actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.public-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.public-btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.public-btn-primary:hover {
    background: var(--color-primary-dark);
}

.public-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.public-btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- Stat strip (floats over the hero's bottom edge) ---------- */

.public-stats {
    max-width: 900px;
    margin: -3.5rem auto 0;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.public-stats-inner {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.public-stat {
    padding: 1.5rem 1rem;
    text-align: center;
    border-inline-end: 1px solid var(--color-border);
}

.public-stat:last-child {
    border-inline-end: none;
}

.public-stat strong {
    display: block;
    font-family: var(--pub-font-display);
    font-size: 2.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.public-stat span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* ---------- Main content rhythm ---------- */

.public-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 4rem 1.75rem 5rem;
}

.public-main > .public-stats + * {
    margin-top: 4rem;
}

.public-prose {
    max-width: 68ch;
    margin: 0 auto;
    font-size: 1.08rem;
}

.public-prose h1 {
    font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    margin-bottom: 1.25rem;
}

.public-section-title {
    text-align: center;
    margin-bottom: 2.75rem;
}

.public-section-title h1 {
    font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    margin: 0 0 0.6rem;
}

.public-section-title p {
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* ---------- Cards / grid ---------- */

.public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.75rem;
}

.public-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.public-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
    border-color: var(--pub-line);
}

.public-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--pub-tint);
}

.public-card-avatar {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pub-tint-strong), var(--pub-tint));
    color: var(--color-primary);
    font-family: var(--pub-font-display);
    font-size: 2.75rem;
    font-weight: 600;
}

.public-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.public-card-body h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
}

.public-card-body .role {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

/* ---------- Gallery (editorial masonry via column layout) ---------- */

.public-masonry {
    columns: 3 220px;
    column-gap: 1.25rem;
}

.public-masonry figure {
    margin: 0 0 1.25rem;
    break-inside: avoid;
}

.public-gallery-img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
    box-shadow: var(--shadow);
}

.public-masonry figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ---------- Notices ---------- */

.public-notice {
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 0;
}

.public-notice:last-child {
    border-bottom: none;
}

.public-notice h3 {
    font-size: 1.15rem;
    margin-bottom: 0.2rem;
}

.public-notice time {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Faculty profile ---------- */

.public-profile-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border);
}

.public-profile-photo,
.public-profile-avatar {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

.public-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pub-tint-strong), var(--pub-tint));
    color: var(--color-primary);
    font-family: var(--pub-font-display);
    font-size: 3.4rem;
    font-weight: 600;
}

.public-profile-header h1 {
    font-size: 1.9rem;
    margin-bottom: 0.2rem;
}

.public-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.public-tag-row li {
    background: var(--pub-tint);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
}

/* ---------- Contact ---------- */

.public-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 820px;
    margin: 0 auto;
}

.public-contact-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.public-contact-tile .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pub-tint-strong);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.85rem;
}

.public-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 0;
}

/* ---------- Contact form ---------- */

button.public-btn {
    font-family: inherit;
    cursor: pointer;
}

.public-contact-form-wrap {
    max-width: 560px;
    margin: 2.5rem auto 0;
}

.public-contact-form-wrap h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-align: center;
}

.public-contact-form .form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.public-contact-form .form-group {
    flex: 1;
    min-width: 200px;
    margin-bottom: 1rem;
}

.public-contact-form label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.public-contact-form input[type="text"],
.public-contact-form input[type="email"],
.public-contact-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}

.public-contact-form input:focus,
.public-contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.public-contact-form .field-error {
    display: block;
    color: #b42318;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

.public-contact-form button.public-btn-primary {
    width: 100%;
    justify-content: center;
    border: none;
    font-size: 0.98rem;
    padding: 0.8rem 1.4rem;
}

/* Hidden from real visitors (a scripted bot filling every visible-looking
   field still finds this one) — off-screen, not display:none/hidden, which
   a slightly smarter bot already knows to skip. */
.public-contact-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Footer ---------- */

.public-footer {
    background: var(--pub-tint);
    border-top: 1px solid var(--color-border);
}

.public-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 1.75rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
}

.public-footer-brand {
    font-family: var(--pub-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.public-footer h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 0.85rem;
    font-weight: 700;
}

.public-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.public-footer-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.92rem;
}

.public-footer-links a:hover {
    color: var(--color-primary);
}

.public-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.public-footer-contact span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.public-footer-bottom {
    border-top: 1px solid var(--color-border);
    text-align: center;
    padding: 1.1rem 1.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

@media (max-width: 760px) {
    .public-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .public-nav {
        margin-inline-start: 0;
    }
    .public-footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .public-masonry {
        columns: 1 100%;
    }
    .public-stats {
        margin-top: -2.5rem;
    }
    .public-stat {
        border-inline-end: none;
        border-bottom: 1px solid var(--color-border);
    }
    .public-stat:last-child {
        border-bottom: none;
    }
}