/* MagicHellas • Life Routes pages v2 (scoped) */
:root{
  --lr-bg: #0b1220;
  --lr-bg2:#0a1a2b;
  --lr-text:#0f172a;
  --lr-muted:#475569;
  --lr-card: rgba(255,255,255,.92);
  --lr-border: rgba(15,23,42,.12);
  --lr-shadow: 0 18px 45px rgba(2,6,23,.18);
  --lr-radius: 22px;
  --lr-accent: #0ea5e9;  /* sky */
  --lr-accent2:#22c55e;  /* green */
  --lr-warm:#f97316;     /* orange */
  --lr-rose:#ec4899;     /* pink */
}

/* Base */
.lr-page{min-height:100vh; background: radial-gradient(1200px 600px at 20% 0%, rgba(14,165,233,.18), transparent 55%),
                               radial-gradient(900px 500px at 85% 15%, rgba(236,72,153,.14), transparent 55%),
                               linear-gradient(180deg, #f8fafc 0%, #f6f7fb 55%, #f8fafc 100%);
  color: var(--lr-text);
}
.lr-container{max-width:1120px; margin:0 auto; padding:34px 18px 64px;}

.lr-hero{--hero-image:none;
  background-image: linear-gradient(135deg, rgba(11,18,32,.86), rgba(10,26,43,.62)), var(--hero-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  border-radius: var(--lr-radius);
  box-shadow: var(--lr-shadow);
  padding: 26px 22px;
  color:#e5e7eb;
  position:relative;
  overflow:hidden;
}
.lr-hero:before{content:""; position:absolute; inset:-2px;
  background: radial-gradient(600px 260px at 20% 0%, rgba(14,165,233,.35), transparent 60%),
              radial-gradient(520px 240px at 90% 20%, rgba(236,72,153,.28), transparent 60%);
  pointer-events:none;
}
.lr-hero > *{position:relative;}

.lr-title{font-family: ui-serif, Georgia, 'Times New Roman', Times, serif; font-weight: 800; letter-spacing:-.02em;
  margin:0 0 6px; font-size: clamp(34px, 4.2vw, 54px); color:#fff;
}
.lr-sub{margin:0; color: rgba(255,255,255,.82); max-width: 72ch; line-height:1.55;}

.lr-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;}
.lr-btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color:#fff;
  text-decoration:none; font-weight:700;
  box-shadow: 0 10px 25px rgba(2,6,23,.20);
}
.lr-btn:hover{transform: translateY(-1px);}
.lr-btn:active{transform: translateY(0px);}
.lr-btn.primary{background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(14,165,233,.95)); border-color: transparent;}
.lr-btn.rose{background: linear-gradient(90deg, rgba(236,72,153,.95), rgba(14,165,233,.85)); border-color: transparent;}
.lr-btn.light{background: rgba(255,255,255,.92); color:#0b1220; border-color: rgba(15,23,42,.10);}

.lr-section{margin-top:26px;}
.lr-h2{font-family: ui-serif, Georgia, 'Times New Roman', Times, serif; font-weight: 800; margin:0 0 12px;
  font-size: clamp(22px, 2.2vw, 30px);
}

.lr-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
.lr-card{grid-column: span 6; background: var(--lr-card); border:1px solid var(--lr-border); border-radius: 18px;
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
  padding: 16px 16px 14px;
}
@media (max-width: 880px){.lr-card{grid-column: span 12;}}

.lr-card h3{margin:0 0 6px; font-size: 18px; letter-spacing:-.01em;}
.lr-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 10px; color: var(--lr-muted); font-size: 14px;}
.lr-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(15,23,42,.12); background: rgba(2,6,23,.03); font-size: 12px; font-weight: 700; color:#111827;
}
.lr-badge.type-thermal{border-color: rgba(249,115,22,.25); background: rgba(249,115,22,.08);}
.lr-badge.type-fishing{border-color: rgba(14,165,233,.25); background: rgba(14,165,233,.08);}
.lr-badge.type-camping-hiking{border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08);}
.lr-badge.type-agro{border-color: rgba(236,72,153,.25); background: rgba(236,72,153,.08);}

.lr-card p{margin:0 0 10px; color: #111827; line-height:1.55;}

.lr-openmap{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px;}
.lr-openmap a{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px;
  border-radius: 12px; border:1px solid rgba(15,23,42,.12);
  background:#fff; text-decoration:none; font-weight:800; color:#0b1220;
}
.lr-openmap a:hover{border-color: rgba(14,165,233,.35);}

/* Practical info */
.lr-details{margin-top:12px; border-top:1px dashed rgba(15,23,42,.16); padding-top:12px;}
.lr-details summary{cursor:pointer; list-style:none; font-weight:900; color:#0b1220; display:flex; align-items:center; gap:10px;}
.lr-details summary::-webkit-details-marker{display:none;}
.lr-details summary .lr-dot{width:9px; height:9px; border-radius:50%; background: var(--lr-accent); display:inline-block;}

.lr-info{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:12px;}
.lr-info .box{grid-column: span 6; background: rgba(2,6,23,.03); border:1px solid rgba(15,23,42,.10);
  border-radius: 14px; padding: 12px 12px 10px;
}
@media (max-width: 880px){.lr-info .box{grid-column: span 12;}}
.lr-info h4{margin:0 0 6px; font-size: 14px; letter-spacing:.01em; text-transform: uppercase; color: rgba(15,23,42,.78);}
.lr-info ul{margin:0; padding-left: 18px; color:#0f172a;}
.lr-info li{margin:4px 0;}
.lr-info a{color:#0b63ce; font-weight:800; text-decoration:none;}
.lr-info a:hover{text-decoration:underline;}

/* Tabs (draft page) */
.lr-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.lr-tab{padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:900;}
.lr-tab.active{background: rgba(255,255,255,.92); color:#0b1220; border-color: rgba(15,23,42,.10);}

/* Small footer */
.lr-foot{margin-top:28px; color: rgba(15,23,42,.65); font-size: 13px;}
/* Life Routes - Services directory (data-driven) */
.lr-services__list{margin:.35rem 0 0; padding-left:1.05rem}
.lr-services__item{margin:.25rem 0}
.lr-services__head{display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap}
.lr-services__badge{font-size:.75rem; padding:.15rem .45rem; border-radius:999px; border:1px solid rgba(15,23,42,.15); background:rgba(255,255,255,.6)}
.lr-services__note{font-size:.92rem; opacity:.9}
.lr-services__foot{margin-top:.5rem; font-size:.82rem; opacity:.75}
.lr-services__empty{font-size:.92rem; opacity:.8}

/* Card media (optional image banner inside each route card) */
.lr-card-media{--card-image:none;
  height: 140px;
  border-radius: 18px;
  background-image: linear-gradient(135deg, rgba(11,18,32,.35), rgba(10,26,43,.15)), var(--card-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  margin: 6px 0 14px;
}
@media (max-width: 680px){ .lr-card-media{height: 120px;} }