/* Viking Motors - стили контентных страниц (hinnasto, eramaksu,
   ilmastointihuolto, renkaanvaihto, sijaisauto). Грузится ПОСЛЕ site.css. */
html { scroll-behavior: smooth; }
.top-header .container { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.nav-links li a { display: block; padding: 18px 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--black); text-transform: uppercase; transition: all 0.3s; position: relative; }
.nav-links li a::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--blue); transition: width 0.3s; }
.nav-cta a { display: inline-block; background: var(--blue); color: var(--white) !important; padding: 12px 28px; border-radius: 4px; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; transition: background 0.3s, transform 0.2s; animation: nav-pulse 2s infinite; }
.content-wrap h3 { font-size: 20px; font-weight: 700; color: var(--blue); margin: 30px 0 12px; }
.content-wrap p { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 16px; }
.content-wrap ul { margin: 0 0 20px 20px; }
.content-wrap ul li { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 6px; }
.intro-card .highlight { font-size: 17px; font-weight: 600; color: var(--blue); margin-top: 15px; }
.intro-card a { color: #29b6f6; text-decoration: underline; }
.intro-card a:hover { color: #0288d1; }
.intro-card a[href='/ajanvaraus'] { text-decoration: none; }
.intro-card a[href='/ajanvaraus']:hover { color: var(--white); }
@media (max-width: 900px) {
    .top-header .container { flex-direction: column; text-align: center; gap: 15px; }
    .header-contacts { justify-content: center; }
    .nav-toggle { display: block; }
    .main-nav.stuck .nav-mini-logo { display: flex; }
    .main-nav .container { justify-content: space-between; }
    .main-nav .container { justify-content: flex-end; }
    .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 3px solid var(--blue); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .nav-links.open { display: flex; }
    .nav-links li a { padding: 14px 20px; }
    .nav-cta { margin: 0; }
    .nav-cta a { display: block; border-radius: 0; text-align: center; }
    .nav-dropdown > a { display: flex !important; align-items: center; justify-content: space-between; padding: 15px 20px !important; min-height: 48px; cursor: pointer; }
    .nav-dropdown .dropdown-arrow { font-size: 12px; margin-left: 8px; transition: transform 0.2s; }
    .nav-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
    .nav-dropdown .dropdown-menu { position: static; box-shadow: none; border-radius: 0; background: transparent; display: none; padding: 0; min-width: 0; }
    .nav-dropdown.open .dropdown-menu { display: block; }
    .dropdown-menu li a { padding: 12px 20px 12px 40px !important; font-size: 13px !important; color: #555 !important; }
    
}
.alert-success { background: #d4edda; color: #155724; padding: 14px 20px; border-radius: 4px; margin-bottom: 20px; text-align: center; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 40px 20px; }
.contact-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.contact-item i { color: var(--blue); font-size: 18px; margin-top: 3px; width: 20px; text-align: center; }
.contact-item a { color: var(--blue); }
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form { grid-template-columns: 1fr !important; }
    .contact-form .form-group[style*="grid-column"] { grid-column: auto !important; }
    .contact-form div[style*="grid-column"] { grid-column: auto !important; }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(41,182,246,0.7); } 70% { box-shadow: 0 0 0 10px rgba(41,182,246,0); } 100% { box-shadow: 0 0 0 0 rgba(41,182,246,0); } }

/* accordion / palvelut + ukk */
/* --stick = высота липкой .main-nav (site.css:26, position:sticky top:0) */
:root{--stick:76px}
@media (min-width:901px){
  :root{--stick:64px}
  .cat,.accordion__item{--stick:124px}
}

.palvelut__intro{max-width:760px;margin:0 auto 20px;text-align:center}
.palvelut__trust{font-size:14px;color:#555;margin-top:8px}

/* чипы-оглавление */
.cat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 8px}
.cat-nav a{display:inline-block;padding:8px 14px;border-radius:20px;background:#eef1f4;color:#233240;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.cat-nav a:hover,.cat-nav a.is-active{background:#22B8F0;color:#fff}

/* панель категории */
.cat{background:#22B8F0;border-radius:16px;padding:14px 12px 12px;margin:24px 0;scroll-margin-top:var(--stick,90px)}
.cat--faq{background:#eef1f4}
.cat__title{margin:0 8px 12px;font-size:20px;font-weight:800;color:#fff}
.cat--faq .cat__title{color:#233240}

/* пилюли */
.accordion{display:flex;flex-direction:column;gap:8px}
.accordion__item{background:transparent;border-radius:28px;scroll-margin-top:var(--stick,90px)}
.accordion__item[open]{background:#fff;border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.accordion__head{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#eef1f4;border-radius:28px;cursor:pointer;list-style:none}
.accordion__head::-webkit-details-marker{display:none}
.accordion__item[open] .accordion__head{background:#e4e8ec;border-radius:20px 20px 0 0}
.cat--faq .accordion__head{background:#fff}
.cat--faq .accordion__item[open] .accordion__head{background:#fff;box-shadow:inset 0 -1px 0 #e3e6ea}
.accordion__icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#233240;position:relative}
.accordion__icon::before,.accordion__icon::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff}
.accordion__icon::before{width:10px;height:2px}
.accordion__icon::after{width:2px;height:10px;transition:transform .2s}
.accordion__item[open] .accordion__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.accordion__title{flex:1;margin:0;font-size:15px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#233240}
.cat--faq .accordion__title{text-transform:none;font-size:16px}
.acc-price{white-space:nowrap;font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px}
.acc-price--fixed{background:#22B8F0;color:#fff}
.acc-price--hourly{background:#FFE082;color:#4a3b00}
.acc-price--ask{background:#fff;color:#555;border:1px solid #cfd4da}
.accordion__body{padding:16px 20px 20px}
.accordion__body p{margin:0}
.accordion__bullets{margin:12px 0 0;padding-left:18px}
.accordion__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}


@media (min-width:901px){
  .cat-nav{position:sticky;top:var(--stick,0px);z-index:5;background:#fff;padding:10px 0;margin-top:0}
}
@media (max-width:600px){
  .accordion__head{flex-wrap:wrap;padding:12px 14px}
  .accordion__title{font-size:14px}
  .acc-price{margin-left:34px}
  .accordion__body{padding:14px 16px 16px}
  .cat{padding:12px 8px 8px}
}

/* price-card: hinnasto / ilmastointihuolto / renkaanvaihto.
   Селекторы двухклассовые, чтобы перебивать .content-wrap h3 / .content-wrap p,
   когда карточка выводится внутри .content-wrap. */
.price-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 30px; margin-bottom: 20px; }
.price-card .price-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.price-card .price-card__title { font-size: 18px; font-weight: 800; color: #111; margin: 0; }
.price-card .price-card__price { font-size: 18px; font-weight: 800; color: #29b6f6; white-space: nowrap; margin-left: 20px; }
.price-card .price-card__desc { font-size: 14px; color: #666; margin-bottom: 10px; }
.price-card .price-card__content { margin-top: 15px; }

/* palvelu — страница услуги /palvelut/{slug}.
   Разметка целиком на партиалах, инлайновых стилей у страницы нет.
   .palvelu-body ограничивает h2 своим контейнером: глобальное
   `.content-wrap h2` перебило бы `.cat__title` в аккордеоне. */
/* баннер контентной страницы (.page-banner): страница услуги и /meista.
   Копия правил #renkaanvaihto-banner из home.blade.php, без кнопки «LUE LISÄÄ». */
/* Высота баннера задаётся явно, а не через aspect-ratio: иначе на 2560px
   картинка 1715×500 растягивалась до ~750px, а квадрат на планшете — до 768px. */
.page-banner .rv-img{width:100%;display:block;height:clamp(280px,24vw,440px);object-fit:cover;object-position:center}
.page-banner .rv-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
/* Надписи на баннере по умолчанию нет: H1 уже стоит в синей полосе над ним.
   .rv-title рендерится, только если у услуги заполнен hero_text. */
.page-banner .rv-title{font-size:clamp(20px,4vw,48px);font-weight:bold}
/* Если надпись всё-таки понадобится — включить плашку за текстом,
   иначе тёмный текст теряется на светлом фото:
.page-banner .rv-title{background:rgba(255,255,255,.72);padding:.3em .8em;border-radius:12px;backdrop-filter:blur(4px)}
*/
/* 601–900px: <picture> ещё отдаёт десктопную картинку (переключение на квадрат
   стоит на max-width:600px), поэтому полоса пониже. */
@media (max-width:900px){
  .page-banner .rv-img{height:260px}
  .page-banner .rv-text{top:22%}
  .page-banner .rv-title{font-size:clamp(30px,8vw,48px)}
}
/* ≤600px: квадратная картинка. .page-banner--desktop-only (у услуги нет мобильной
   версии) отдельного правила не требует — высоты общие, десктопную режет cover. */
@media (max-width:600px){
  .page-banner .rv-img{height:min(70vw,320px)}
}
.crumbs{max-width:800px;margin:0 auto;padding:14px 20px 0;font-size:13px;color:#777}
.crumbs a{color:#777;text-decoration:none}
.crumbs a:hover{color:#22B8F0;text-decoration:underline}
.palvelu-wrap{max-width:800px;margin:0 auto;padding:20px 20px 0}
/* h2 внутри page_body и «Hinnasto» — как <h2> в контенте /renkaanvaihto:
   тёмный, 1.5em, bold. .content-wrap h3 и .cat__title не затрагиваются. */
.palvelu-body h2{font-size:1.5em;font-weight:700;color:var(--black);margin:30px 0 12px}
/* Ссылки внутри текста услуги. Без этого правила они наследуют цвет абзаца
   и неотличимы от обычного текста (F-5). Цвет — как у .link-arrow в site.css,
   подчёркивание всегда, при наведении темнее.
   Селектор сужен до p a / li a (F-5b): блок цены .palvelu-price__ask для
   ask-услуг лежит ВНУТРИ .palvelu-body, и общее .palvelu-body a подчёркивало
   его кнопку .btn-cta. Кнопка лежит в .palvelu-actions (div, не <p>),
   поэтому p a / li a её больше не ловят. */
.palvelu-body p a, .palvelu-body li a{color:#22B8F0;text-decoration:underline}
.palvelu-body p a:hover, .palvelu-body li a:hover{color:var(--blue-dark);text-decoration:underline}
.palvelu-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin:24px 0 8px}
.palvelu-price__row{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:20px 30px;font-size:18px;font-weight:800;color:#111}
.palvelu-price__row span:last-child{color:#29b6f6;white-space:nowrap}
.palvelu-price__ask{background:#fff;border-left:4px solid #22B8F0;border-radius:8px;padding:20px 24px;margin-top:20px}
.palvelu-price__ask p{margin:0}
/* строка про НДС под карточками цен (partials/alv-note + hinnasto) */
.alv-note{margin-top:10px;font-size:13px;color:var(--gray);line-height:1.6;text-align:center}
/* вопросы FAQ — тёмные. .content-wrap h3 (0,1,1) красит их в голубой,
   поэтому нужен селектор специфичнее. Пилюли услуг (.cat без --faq) остаются голубыми. */
.cat--faq .accordion__title,.content-wrap .cat--faq .accordion__title{color:#233240}
/* Старый класс кнопки действия удалён в CSS-2: все CTA перешли на общий
   .btn-cta в site.css. Здесь кнопки не объявлять. */
/* Отдельного правила для «Soita meille» в CTA-ряду больше нет (CSS-3):
   телефонная кнопка перешла на .btn-cta .btn-cta--call и по геометрии
   совпадает с соседней кнопкой действия. */
@media (max-width:600px){
  .palvelu-actions{flex-direction:column;align-items:stretch;text-align:center}
  .palvelu-price__row{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 20px}
}

/* /meista — галерея. Класс .about-grid намеренно тот же, что у секции ABOUT
   на главной, но правило ограничено .meista-wrap: у главной свой .about-grid
   (2 колонки 55/45) в inline-<style>, и он не должен пересекаться с этим. */
.meista-wrap{max-width:800px;margin:0 auto;padding:20px 20px 0}
.meista-wrap .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 10px}
.meista-wrap .about-grid figure{margin:0}
.meista-wrap .about-grid img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.meista-wrap .about-grid figcaption{margin-top:8px;font-size:13px;color:var(--gray);text-align:center}
.meista-reviews{text-align:center;margin-top:24px}
@media (max-width:600px){
  .meista-wrap .about-grid{grid-template-columns:1fr}
}