/* ========================================================================
   region-service-page.css
   Scoped: only city.alpin.work/services/{slug}/ pages
   ======================================================================== */

/* ---------- Base spacing ---------- */
.region-service-page .aw-section { padding-top: 18px; }

/* ---------- Two col layout stability ---------- */
.region-service-page .aw-two-col{
  align-items: start;
  gap: 16px;
}

.region-service-page .aw-two-col__main{ min-width: 0; }
.region-service-page .aw-two-col__sidebar{ position: sticky; top: 14px; }

@media (max-width: 980px){
  .region-service-page .aw-two-col__sidebar{ position: static; top: auto; }
}

/* ---------- Unified cards look ---------- */
.region-service-page .region-card{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  background: #fff;
}

.region-service-page .aw-card--light.region-card{ background: #fff; }

.region-service-page .aw-card__body{ padding: 18px; }

/* ---------- Force light (kills dark overlays from global styles) ---------- */
.region-service-page .aw-card,
.region-service-page .aw-card--light,
.region-service-page .region-card{
  background:#fff !important;
  color:#0f172a !important;
}

.region-service-page .aw-card::before,
.region-service-page .aw-card::after,
.region-service-page .aw-card--light::before,
.region-service-page .aw-card--light::after{
  content:none !important;
}

/* ========================================================================
   HERO
   ======================================================================== */
.region-service-page .aw-two-col__main > .aw-card.region-card{ color:#0f172a; }

/* HERO kicker row (if used) */
.region-service-page .region-hero-kicker{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Chips */
.region-service-page .region-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.region-service-page .region-chip i{ opacity:.9; }

/* H1 */
.region-service-page h1.aw-section-title{
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
@media (max-width: 520px){
  .region-service-page h1.aw-section-title{ font-size: 24px; }
}

/* subtitles / p */
.region-service-page .aw-section-subtitle,
.region-service-page .region-p,
.region-service-page .region-empty-text{
  color: rgba(15, 23, 42, 0.78) !important;
}

/* Titles */
.region-service-page .aw-section-title,
.region-service-page h1,
.region-service-page h2{
  color: #0f172a !important;
}

/* CTA buttons */
.region-service-page .aw-btn{ border-radius: 12px; }

/* ✅ WARNING BOX (workersCnt <= 0)
   NOTE: прибрав хак з [style*="background:..."].
   Краще ставити клас в PHP: class="region-workers-warn"
*/
.region-service-page .region-workers-warn{
  border: 1px solid rgba(255, 190, 0, 0.35);
  background: rgba(255, 190, 0, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ---------- HERO GRID (замість inline) ---------- */
.region-service-page .region-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .region-service-page .region-hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- HERO MEDIA (замість inline) ---------- */
.region-service-page .region-hero-media{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
  min-height: 220px;
  height: 100%;
}

.region-service-page .region-hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* ✅ CITY BADGE ON HERO IMAGE */
.region-service-page .region-hero-city{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  color: #fff;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.region-service-page .region-hero-city i{ opacity:.95; }

/* ========================================================================
   PHOTOS
   ======================================================================== */
.region-service-page .region-card-photos .aw-card__body{ padding: 18px; }

.region-service-page .region-photos-subtitle{
  margin: 6px 0 0;
  color: rgba(15, 23, 42, 0.72);
}

.region-service-page .region-photos-grid{
  margin-top: 14px;
  gap: 10px;
}

/* photo tiles */
.region-service-page .region-photo-tile{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.02);
  display: block;
}

.region-service-page .region-photo-img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .18s ease;
}

.region-service-page .region-photo-tile:hover .region-photo-img{ transform: scale(1.03); }

/* grid 4 → 2 → 1 */
@media (max-width: 860px){
  .region-service-page .region-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px){
  .region-service-page .region-grid-4{ grid-template-columns: 1fr; }
}

/* ========================================================================
   FAQ
   ======================================================================== */
.region-service-page .region-faq-subtitle{ margin: 6px 0 0; }

.region-service-page .region-faq-item{
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.02);
  overflow: hidden;
}

.region-service-page .region-faq-summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 12px;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  color: #0f172a !important;
}
.region-service-page .region-faq-summary *{ color: inherit !important; }

.region-service-page .region-faq-body{
  padding: 0 12px 12px;
  color: rgba(15, 23, 42, 0.78) !important;
  line-height: 1.5;
}

.region-service-page details[open] .region-faq-summary{
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
}

/* ========================================================================
   Buttons: outline visibility (e.g. "Усі фото")
   ======================================================================== */
.region-service-page .aw-btn.aw-btn-outline-primary,
.region-service-page .aw-btn.aw-btn-outline-primary:visited{
  color: #0f172a !important;
}
.region-service-page .aw-btn.aw-btn-outline-primary i,
.region-service-page .aw-btn.aw-btn-outline-primary svg{
  color: inherit !important;
}
.region-service-page .aw-btn.aw-btn-outline-primary:hover,
.region-service-page .aw-btn.aw-btn-outline-primary:focus{
  color: #0f172a !important;
}
.region-service-page a.aw-btn.aw-btn-outline-primary *,
.region-service-page button.aw-btn.aw-btn-outline-primary *{
  color: inherit !important;
}

/* ========================================================================
   Sidebar: "Other popular works"
   ======================================================================== */
.region-service-page .aw-two-col__sidebar .aw-card__body{ padding: 16px; }

.region-service-page .aw-two-col__sidebar a{
  color: rgba(15, 23, 42, 0.92);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(15, 23, 42, 0.02);
  text-decoration: none;
}
.region-service-page .aw-two-col__sidebar a:hover{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.10);
}

/* Sidebar CTA readability */
.region-service-page .aw-two-col__sidebar .aw-card{
  opacity: 1 !important;
  color: #0f172a !important;
}
.region-service-page .aw-two-col__sidebar,
.region-service-page .aw-two-col__sidebar p,
.region-service-page .aw-two-col__sidebar span,
.region-service-page .aw-two-col__sidebar div{
  color: #0f172a !important;
}
.region-service-page .aw-two-col__sidebar .region-p{
  color: rgba(15, 23, 42, 0.8) !important;
}
.region-service-page .aw-two-col__sidebar i,
.region-service-page .aw-two-col__sidebar svg{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* Sidebar buttons hover/active */
.region-service-page .aw-two-col__sidebar .aw-btn{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .06s ease, box-shadow .18s ease;
}

/* outline hover */
.region-service-page .aw-two-col__sidebar .aw-btn.aw-btn-outline-primary{
  border-color: rgba(15, 23, 42, 0.18) !important;
  background: transparent !important;
}
.region-service-page .aw-two-col__sidebar .aw-btn.aw-btn-outline-primary:hover{
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.28) !important;
}
.region-service-page .aw-two-col__sidebar .aw-btn.aw-btn-outline-primary:active{
  transform: translateY(1px);
}

/* primary hover (force bg/border change) */
.region-service-page .aw-two-col__sidebar a.aw-btn.aw-btn-primary:hover{
  background-color: rgba(0, 196, 204, 0.18) !important;
  border-color: rgba(0, 196, 204, 0.55) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}
.region-service-page .aw-two-col__sidebar a.aw-btn.aw-btn-primary:active{
  transform: translateY(1px);
}

.region-service-page .aw-two-col__sidebar{ pointer-events: auto !important; }

/* ========================================================================
   ARTICLE block (between HERO and PHOTOS)
   Fix: text invisible / white-on-white
   Scoped: only service page + only article
   ======================================================================== */
.region-service-page .region-article{
  color: #0f172a !important;
}

.region-service-page .region-article *{
  color: inherit;
  opacity: 1 !important;
}

/* normal readable body text */
.region-service-page .region-article p,
.region-service-page .region-article li{
  color: rgba(15, 23, 42, 0.82) !important;
}

/* headings */
.region-service-page .region-article .aw-section-title,
.region-service-page .region-article h2,
.region-service-page .region-article h3{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* benefit cards */
.region-service-page .region-article .region-article-benefit{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px;
  padding: 12px 14px;
}

.region-service-page .region-article .region-article-benefit-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color: #0f172a !important;
  margin: 0 0 6px;
}

.region-service-page .region-article .region-article-benefit-title i{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* warning box */
.region-service-page .region-article .region-article-warn{
  background: rgba(255, 190, 0, 0.14) !important;
  border: 1px solid rgba(255, 190, 0, 0.35) !important;
  border-radius: 14px;
  padding: 12px 14px;
}

.region-service-page .region-article a{ color: inherit !important; }

/* ARTICLE warning accent (optional helper class) */
.region-service-page .region-article-warn-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #b42318;
}
.region-service-page .region-article-warn-title i{ color: #b42318; }

/* ✅ Mobile fallback для PROCESS grid в ARTICLE (замість inline) */
@media (max-width: 768px){
  .region-service-page .region-article .region-process-grid{
    grid-template-columns: 1fr !important;
  }
  .region-service-page .region-article .region-process-grid img{
    max-height: 240px;
  }
}