*{box-sizing:border-box}
body{margin:0;
font-family:Arial,sans-serif;
color:#333;
background:#fff;
line-height:1.7}.container{width:min(1120px,92%);
margin:auto}
.site-header{border-bottom:1px solid #eee;background:#fff}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{font-size:25px;font-weight:700;color:#222;text-decoration:none}
.nav nav,.footer nav{display:flex;flex-wrap:wrap;gap:22px}.nav a,.footer a{color:#333;text-decoration:none}
.nav nav a.active,.nav nav a:hover{color:#8b6f47}
.hero{padding:95px 0;background:#f6f1ea;text-align:center}
.hero h1{font-size:52px;margin:8px 0 15px}
.hero p{max-width:820px;margin:auto}
.eyebrow{letter-spacing:4px;font-size:12px}
.section{padding:70px 0}
.intro{text-align:center;max-width:850px}
.title{text-transform:uppercase;letter-spacing:2px}.rule{height:2px;background:#222;width:45px;margin:18px auto 28px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.card{border:1px solid #eee;padding:25px;background:#fff}.card img,.disease-card img,.gallery img{width:100%;height:210px;object-fit:cover;background:#eee}.disease-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.disease-card{border:1px solid #eee;padding:12px}.disease-card a{color:#333;text-decoration:none;font-weight:600}.pagination{display:flex;gap:8px;justify-content:center;margin-top:35px}.pagination a,.btn{display:inline-block;padding:8px 14px;background:#222;color:#fff;text-decoration:none;border:0;cursor:pointer}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery .item{border:1px solid #eee;padding:10px}.form{max-width:700px;margin:auto}.form input,.form textarea{width:100%;padding:12px;border:1px solid #ccc;margin:6px 0 18px}.footer{padding:45px 0;background:#222;color:#ddd;margin-top:40px}.footer a{color:#ddd}.notice{padding:12px;background:#eef7ee;margin-bottom:20px}.error{padding:12px;background:#ffecec}.adminbar{background:#222;color:#fff;padding:12px}.adminbar a{color:#fff;margin-right:18px}.admin .card{margin-top:20px}.table{width:100%;border-collapse:collapse}.table th,.table td{border:1px solid #ddd;padding:10px;text-align:left}.form-row{margin-bottom:14px}.form-row label{display:block;font-weight:600}.form-row input,.form-row textarea,.form-row select{width:100%;padding:10px;border:1px solid #ccc}@media(max-width:800px){.nav{display:block;padding:15px 0}.nav nav{margin-top:12px}.hero{padding:60px 0}.hero h1{font-size:38px}.grid,.disease-grid,.gallery{grid-template-columns:1fr}.site-header{text-align:center}}
.form label{display:block;font-weight:600}.card form input,.card form textarea{width:100%;padding:12px;border:1px solid #ccc;margin:6px 0 18px}


/* ===== Responsive improvements: desktop, tablet and mobile ===== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { min-width: 320px; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
.container { width: min(1120px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.nav { flex-wrap: wrap; }
.nav nav { align-items: center; }
.nav nav a { display: inline-block; padding: 7px 0; }
.adminbar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.adminbar a { display: inline-block; margin: 0; padding: 5px 0; }
.grid, .disease-grid, .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > *, .disease-grid > *, .gallery > *, .card, .disease-card, .gallery .item { min-width: 0; }
.card img, .disease-card img, .gallery img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.form input, .form textarea, .form select, .form-row input, .form-row textarea, .form-row select,
input, textarea, select, button { max-width: 100%; font: inherit; }
.form input, .form textarea, .form select, .form-row input, .form-row textarea, .form-row select {
  width: 100%; min-height: 44px; padding: 10px 12px;
}
textarea { resize: vertical; }
button, .btn { min-height: 40px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { vertical-align: top; overflow-wrap: anywhere; }
.admin .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin h1, .admin h2, .card h1, .card h2, .card h3 { overflow-wrap: anywhere; }
.hero { padding: clamp(42px, 8vw, 95px) 0; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.2; }
.section { padding: clamp(36px, 6vw, 70px) 0; }
.footer nav { flex-wrap: wrap; }

@media (max-width: 900px) {
  .container { width: calc(100% - 32px); }
  .nav { justify-content: center; gap: 10px; padding: 16px 0; }
  .brand { display: block; width: 100%; text-align: center; }
  .nav nav { justify-content: center; gap: 8px 18px; }
  .grid, .disease-grid, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 52px 0; }
}

@media (max-width: 600px) {
  body { font-size: 15px; line-height: 1.6; }
  .container { width: calc(100% - 28px); }
  .nav { padding: 12px 0; gap: 8px; }
  .brand { font-size: 22px; }
  .nav nav { justify-content: center; gap: 4px 14px; }
  .nav nav a { font-size: 14px; padding: 5px 0; }
  .hero { padding: 42px 0; }
  .hero h1 { font-size: clamp(27px, 8vw, 36px); }
  .eyebrow { letter-spacing: 2px; }
  .section { padding: 36px 0; }
  .grid, .disease-grid, .gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card { padding: 18px; }
  .disease-card, .gallery .item { padding: 10px; }
  .pagination { flex-wrap: wrap; }
  .pagination a, .btn { padding: 9px 12px; font-size: 14px; }
  .adminbar { padding: 10px 0; }
  .adminbar .container { justify-content: center; gap: 6px 14px; }
  .adminbar a { font-size: 13px; }
  .admin { padding: 20px 0; }
  .admin h1 { font-size: 25px; line-height: 1.25; }
  .admin h2 { font-size: 20px; }
  .admin .card { padding: 16px; overflow: hidden; }
  .admin .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin .table th, .admin .table td { min-width: 90px; font-size: 13px; padding: 8px; }
  .footer { padding: 30px 0; }
  .footer nav { gap: 8px 14px; }
}