/**
 * Metro Landing — styles for metro_landing.php (ml-* classes)
 * List page: stations grouped by metro lines
 * Detail page: full-width Liquid theme sections
 */

/* ── Page wrapper (list page) ── */
.ml-page #wrap { background: #fff; }
.ml-page #lqd-site-content,
.ml-page .contact,
.ml-page #lqd-contents-wrap { background: #fff !important; }

/* Override Liquid theme center */
#wrap > main .ml-hero:not(#site-footer) h1,
#wrap > main .ml-hero:not(#site-footer) p { text-align: center !important; }
#wrap > main .ml-lines:not(#site-footer) h2 { text-align: left !important; }

/* ── Hero (list page) ── */
.ml-hero { background: #fdf6f4; padding: 43px 0 32px; text-align: center; }
.ml-hero h1 { font-size: clamp(22px, 4vw, 30px); color: #222; margin: 0 0 8px; }
.ml-hero p { color: #666; font-size: 15px; margin: 0; }
.ml-hero a { color: #006bd8; }
@media (max-width: 600px) {
    .ml-hero { padding: 20px 0 24px; }
}

/* ── Lines list ── */
.ml-lines { padding: 24px 0 60px; }
.ml-line { margin-bottom: 44px; }
.ml-line-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #222; margin: 0 0 10px; }
.ml-line-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ml-stations { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-station { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; font-size: 13px; text-decoration: none; color: #333; background: #fff; border: 1px solid #e0d6d0; transition: all .15s; }
.ml-station:hover { border-color: #e25da0; color: #e25da0; }
.ml-station-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ml-station-cnt { font-size: 11px; color: #aaa; }

/* ── Detail page: category chips ── */
.ml-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; background: #fff; border: 2px solid; transition: all .2s; }
.ml-cat-chip:hover { opacity: .8; }

/* ── Detail page: venues grid ── */
.ml-venues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }

.ml-venue-card {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 12px; padding: 18px;
    text-decoration: none; color: inherit;
    transition: box-shadow .2s;
    text-align: left;
}
.ml-venue-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); color: inherit; }

.ml-venue-top { flex: 1; }
.ml-venue-name { font-size: 15px; font-weight: 600; color: #006bd8; line-height: 1.3; margin-bottom: 8px; }
.ml-venue-sub { font-size: 13px; font-weight: 400; color: #888; }
.ml-venue-name a { color: #006bd8; text-decoration: none; }
.ml-venue-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }

.ml-cat-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; color: #fff; }
.ml-age-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: #fff4e6; color: #e67e22; border: 2px solid #fff; }

.ml-venue-bottom { margin-top: auto; padding-top: 10px; }
.ml-venue-addr { font-size: 13px; color: #666; line-height: 1.4; }
.ml-venue-metro { font-size: 12px; color: #999; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.ml-venue-metro-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Links grid ── */
.ml-links-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ml-link-card { display: inline-block; padding: 10px 20px; background: #fff; border-radius: 10px; font-size: 14px; font-weight: 500; color: #006bd8; text-decoration: none; transition: box-shadow .2s, transform .2s; border: 1px solid #eee; }
.ml-link-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); transform: translateY(-1px); color: #006bd8; }

@media (max-width: 600px) {
    .ml-stations { flex-direction: column; gap: 0; }
    .ml-station { width: 100%; background: none; border: none; border-bottom: 1px solid #eee; border-radius: 0; padding: 10px 0; font-size: 14px; }
    .ml-venues-grid { grid-template-columns: 1fr; gap: 8px; }
    .ml-venue-card { padding: 14px; border-radius: 10px; }
    .ml-venue-name { font-size: 13px; }
    .ml-venue-addr { font-size: 11px; }
    .ml-venue-metro { font-size: 11px; }
}

/* ── Detail page: service icons animation ── */
#services .iconbox-icon-wrap img { transform: scale(0); opacity: 0; transition: none; }
#services .iconbox-icon-wrap img.bubble-in { animation: bubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes bubblePop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    80%  { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}