:root{
  --bg:#f7f7fb; --primary:#7dcfb6; --accent:#f6c1c0; --yellow:#ffe2b3;
  --lav:#bdc9e1; --mint:#c8e6c9; --text:#2b2d42; --muted:#8d99ae; --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,0.06); --radius: 18px; --tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%);margin:0 auto}

/* Header & nav */
.site-header{position:sticky;top:0;background:#fff8;backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid #eee}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:1.2rem;padding:.4rem .8rem;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--lav));color:#fff;box-shadow:var(--shadow)}
.site-header nav a{margin-left:12px;padding:8px 12px;border-radius:12px;transition:.2s;background:transparent}
.site-header nav a:hover{background:rgba(0,0,0,.06)}
.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff !important}
.menu-toggle{display:none; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; box-shadow:var(--shadow); min-height:var(--tap)}
.menu-toggle:focus{outline:2px solid var(--lav); outline-offset:2px;}

/* Dropdown */
.dropdown{ position:relative; display:inline-block; }
.drop-toggle{ padding:8px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; color: var(--text); box-shadow:var(--shadow); cursor:pointer; }
.drop-toggle:focus{ outline:2px solid var(--lav); outline-offset:2px; }
.drop-menu{ position:absolute; top:110%; left:0; display:none; flex-direction:column; min-width:220px; gap:6px; background:#fff; padding:10px; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); z-index:20; }
.drop-menu a{ padding:8px 10px; border-radius:10px; }
.drop-menu a:hover{ background:#f7f7fb; }
.dropdown.open > .drop-menu{ display:flex; }
@media (hover:hover){
  .dropdown:hover > .drop-menu{ display:flex; }
}



/* Hero & cards */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:28px 0 10px}
.hero .card{padding:24px;border-radius:var(--radius);background:linear-gradient(135deg,#fff, #fff8);box-shadow:var(--shadow)}
h1{ font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); }
h2{ font-size: clamp(1.2rem, 1.8vw + 0.9rem, 1.6rem); }
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{background:var(--card);padding:8px 12px;border-radius:999px;box-shadow:var(--shadow);font-size:.9rem;color:#334}
/* Lai visa "tablete" būtu klikšķināma bez izkārtojuma maiņas */
.badge{ padding: 0;}                         /* noņemam padding no span */
.badge > a{
  display: inline-block;                      /* saglabā “inline” plūsmu */
  padding: 8px 12px;                          /* pārvietojam padding uz <a> */
  color: inherit;
  text-decoration: none;
  border-radius: 999px;                        /* lai fokusa kontūra būtu apaļa */
}
.badge > a:focus{
  outline: 2px solid var(--lav);
  outline-offset: 2px;
}

.cta{display:flex;gap:10px;margin-top:14px}
.button{display:inline-block;padding:8px 12px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--mint));box-shadow:var(--shadow);font-weight:700;font-size:.9rem;min-height:var(--tap)}
.button.mini{padding:6px 10px;border-radius:10px;font-weight:600}
.button.secondary{background:linear-gradient(135deg,var(--accent),var(--yellow))}

.grid{display:grid;gap:18px;grid-template-columns:repeat(12, 1fr)}
.card{grid-column:span 4;background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:6px 0 6px}
.card p{color:#374151;line-height:1.65}

.section{padding:24px 0}
.section h2{margin:0 0 12px}

/* Footer */
.site-footer{margin-top:40px;padding:24px 0;background:#fff;border-top:1px solid #eee;color:#4b5563}
.mini{font-size:.9rem;color:var(--muted)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat( auto-fill, minmax(240px, 1fr) );gap:16px}
.gallery figure{margin:0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.gallery figcaption{padding:10px 12px;color:#445}

/* Days */
.day-header{display:flex;gap:16px;align-items:center;margin:14px 0 10px;flex-wrap:wrap}
.day-header .pill{padding:8px 12px;border-radius:999px;background:#fff;box-shadow:var(--shadow);font-weight:600}
.timeline{border-left:3px dotted #e6e6ef;margin:10px 0 0 10px;padding-left:16px}
.timeline .t{margin:10px 0;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--shadow)}

/* Forms & table */
.form{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.form label{font-size:.9rem;color:#374151}
.form input,.form textarea,.form select{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.form textarea{min-height:90px}
.form .row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:10px;align-items:center;margin-top:4px}
button{padding:10px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--lav));color:#fff;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
button.secondary{background:linear-gradient(135deg,var(--accent),var(--yellow));color:#222}
button.ghost{background:#fff;border:1px solid #e5e7eb;color:#333}

/* Data table */
.table{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:700px}
.table th{font-size:.9rem;text-align:left;color:#6b7280;padding:4px 10px}
.table td{background:#fff;padding:10px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.table tr td:first-child{border-left:1px solid #eee;border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid #eee;border-top-right-radius:12px;border-bottom-right-radius:12px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Responsive tweaks */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid .card{grid-column:span 12}
  .form .row{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .site-header .nav{ position: relative; }
  .menu-toggle{ display:inline-flex; z-index:50; } /* poga virs paneļa */
  .menu-toggle::before{ content: "..."; font-size:20px; color: #181d1b;}
  
  .site-header nav.main-nav{
    position:absolute; top:58px; right:4%; left:4%;
    background:#fff; border:1px solid #eee; border-radius:14px;
    box-shadow:var(--shadow); padding:10px;
    display:none; flex-direction:column; z-index:40;
  }
  .site-header nav.main-nav.open{ display:flex !important; } /* ← svarīgi */
  .site-header nav a{ margin:6px 0; }
}
@media (max-width: 420px){
  .gallery{grid-template-columns:1fr}
}

/* --- Responsive stacked table for very small screens --- */
@media (max-width: 560px){
  .table.responsive{border-collapse:separate; border-spacing:0; width:100%}
  .table.responsive thead{position:absolute; left:-9999px; top:auto; height:1px; width:1px; overflow:hidden}
  .table.responsive tr{display:block; margin:0 0 12px; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:var(--shadow)}
  .table.responsive td{
    display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
    padding:10px 12px; border:none; border-bottom:1px dashed #eee;
  }
  .table.responsive td:last-child{border-bottom:none}
  .table.responsive td::before{
    content: attr(data-label);
    font-weight:600; color:#374151;
  }
  .table.responsive td input[type="url"],
  .table.responsive td select,
  .table.responsive td [contenteditable="true"]{ width:60% }
  .table.responsive td [type="checkbox"]{ transform: scale(1.2); margin-top:2px }
}


/* --- Background-image cards with lazy <img> --- */
.card.has-img{
  position:relative; overflow:hidden; padding:0; min-height:220px;
  display:flex; align-items:flex-end; border-radius:var(--radius);
  box-shadow:var(--shadow); color:#fff; background:#000;
}
.card.has-img .bg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:brightness(.75);
}
.card.has-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  z-index:0;
}
.card.has-img .content{ position:relative; z-index:1; width:100%; padding:14px 16px; }
.card.has-img h3{ margin:0 0 6px; color:#fff; }
.card.has-img p{ margin:0 0 10px; color:#e5e7eb; }
.card.has-img .actions{ display:flex; gap:8px; }
.card.has-img .button.mini{ box-shadow:none; }
@media (max-width: 900px){
  .card.has-img{ min-height:200px; }
}