/* =====================================================================
   Craig H Gray Concerts — global stylesheet
   Tailwind handles most styling; this file adds the custom pieces:
   grain overlay, masonry, lightbox, hero gradient, button utilities.
   ===================================================================== */

html { color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; }

/* film-grain overlay shared by header.php and admin_header.php */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .03;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
    mix-blend-mode: overlay;
}

/* hero "stage" bottom-fade */
.stage-gradient {
    background: linear-gradient(0deg, rgba(18,20,20,1) 0%, rgba(18,20,20,.55) 50%, rgba(18,20,20,0) 100%);
}

/* ---------- buttons (Tailwind @apply isn't available without a build step,
   so we replicate them with utility-style rules) ---------- */
.btn-primary,
.btn-tertiary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color .2s, color .2s, border-color .2s, transform .1s;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: #ff535b;
    color: #5b000e;
}
.btn-primary:hover { background: #ffffff; color: #000; }
.btn-primary:active { transform: scale(.97); }

.btn-tertiary {
    background: #2fa096;
    color: #00302c;
}
.btn-tertiary:hover { background: #ffffff; color: #000; }
.btn-tertiary:active { transform: scale(.97); }

.btn-outline {
    border-color: #ab8987;
    color: #e2e2e2;
    background: transparent;
}
.btn-outline:hover { background: #e2e2e2; color: #121414; }
.btn-outline:active { transform: scale(.97); }

/* ---------- form bits ---------- */
.form-label {
    display: block;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #ab8987;
    margin-bottom: .25rem;
}
/* High-specificity selectors (input.form-input, etc.) so these rules win
   against Tailwind's runtime-injected @tailwindcss/forms plugin styles. */
input.form-input,
select.form-input,
textarea.form-input,
.form-input {
    display: block;
    width: 100%;
    background: #ffffff;
    color: #000000;
    border: 1px solid #5b403f;
    padding: .55rem .75rem;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: .95rem;
    line-height: 1.4;
}
input.form-input:focus,
select.form-input:focus,
textarea.form-input:focus,
.form-input:focus {
    outline: none;
    border-color: #ffb3b1;
    box-shadow: 0 0 0 1px #ffb3b1;
    color: #000000;
}
input.form-input::placeholder,
textarea.form-input::placeholder,
.form-input::placeholder {
    color: #6b6b6b;
}

/* ---------- masonry photo grid ---------- */
.masonry-grid {
    column-count: 1;
    column-gap: 12px;
}
@media (min-width: 640px)  { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
@media (min-width: 1536px) { .masonry-grid { column-count: 4; } }
.masonry-item {
    display: block;
    margin: 0 0 12px;
    break-inside: avoid;
    border: 1px solid #5b403f;
    overflow: hidden;
    background: #1a1c1c;
}
.masonry-item img { display: block; width: 100%; height: auto; }

/* ---------- lightbox ---------- */
.lb-root {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(7,7,8,.96);
    display: flex; flex-direction: column;
    color: #e2e2e2;
}
.lb-root[hidden] { display: none; }
.lb-image-wrap {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 16px 64px;
    overflow: hidden;
}
.lb-image-wrap img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.lb-meta {
    border-top: 1px solid #5b403f;
    padding: 12px 24px;
    background: #0c0f0f;
    font-size: 14px;
}
.lb-meta strong { font-family: "Bebas Neue", sans-serif; letter-spacing: .04em; font-weight: 400; }
.lb-meta .row { display: flex; flex-wrap: wrap; gap: 12px; color: #ab8987; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.lb-controls {
    position: absolute; top: 16px; right: 16px;
    display: flex; gap: 8px;
}
.lb-controls button { background: rgba(255,255,255,.04); border: 1px solid #5b403f; color: #e2e2e2; padding: 6px 10px; font-family: "Bebas Neue", sans-serif; letter-spacing: .12em; cursor: pointer; }
.lb-controls button:hover { background: #ff535b; color: #5b000e; border-color: #ff535b; }
.lb-prev, .lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.04); border: 1px solid #5b403f; color: #e2e2e2;
    padding: 12px 16px; cursor: pointer; font-family: "Bebas Neue", sans-serif; letter-spacing: .12em;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: #ff535b; color: #5b000e; border-color: #ff535b; }

/* placeholder text colors */
::placeholder { color: #5b403f; }