/* Shared site styles */

/* Base */
html,body { height: 100%; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; }

/* Header / brand */
.container-narrow { max-width: 1100px; margin: 0 auto; }
header.section { background-color: #e53935; margin: 0; padding: 0; }
.brand { display:flex; align-items:center; gap:14px; justify-content:center; padding: 18px 0; color: #fff; }
.brand a { color: #fff; }
.brand svg, .brand img { width:160px; height:160px; flex:0 0 160px; }
.brand h1 { margin:0; font-weight:700; font-size:2rem; letter-spacing: .4px; color: #fff; }
.brand .subtitle { margin:0; font-size:1rem; color: #fff; }

/* Buttons - Materialize red theme */
.btn { background-color: #f44336 !important; }
.btn:hover, .btn:focus { background-color: #e53935 !important; }

/* Modal centering and content */
.modal { display: none; }
.modal.open { display:flex; align-items:center; justify-content:center; }
.modal .modal-content { max-height: 80vh; overflow:auto; text-align:center; }
.modal .modal-content h4 { margin-top: 0; font-weight: bolder; }
.modal .modal-content img { max-width: 80%; display: block; margin: 16px auto; }
#modal-desc { text-align: center; }
.modal .modal-footer { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:12px; padding:16px 24px; }
.modal .modal-footer a, .modal .modal-footer button { margin:0; }

/* Grid / tiles */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid #eee; transition: all .15s ease; }
.tile:focus, .tile:hover { border-color: #f44336; box-shadow: 0 8px 20px rgba(244,67,54,0.12); transform: translateY(-3px); }
.thumb-img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* Content helpers */
p { margin-top: 0; margin-bottom: 1.5rem; line-height: 1.6; }
.flow-text { line-height: 1.8; margin-bottom: 1.5rem; }
.card-content p, figcaption p { margin-bottom: 0.75rem; }

/* Page panels */
.card-panel { margin-top: 24px; }
.thumb-preview { width:180px; height:180px; object-fit:cover; display:block; margin:0 auto 16px; border-radius:8px; border:1px solid #eee; }

/* Accessibility */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Footer */
.page-footer { background-color: #e53935; color: #fff; padding: 16px 0; border-top: none; }
.page-footer a { color: #fff; }

/* Small helpers */
.centered { margin: 0 auto; }

/* Ensure responsive header content stacks nicely on very narrow screens */
@media (max-width: 480px) {
  .brand { gap: 8px; padding: 12px 0; }
  .brand svg, .brand img { width:96px; height:96px; flex:0 0 96px; }
  .brand h1 { font-size:1.2rem; }
}