/* /css/pages/service-page.css
   Service pages: /services/<slug>/
   Goal: readable text on light hero + clean dark cards + performers grid
*/

/* ---------- Base typography inside service pages ---------- */
.aw-main .aw-section .aw-section-eyebrow { opacity: .9; }

.aw-main .aw-section .aw-section-title-main {
  margin: 10px 0 8px;
}

.aw-main .aw-section .aw-section-subtitle {
  max-width: 920px;
}

/* =========================================================
   HERO (2/3 text + 1/3 image)
========================================================= */
.aw-service-hero { margin-bottom: 14px; }

.aw-service-hero-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: start;
}

/* breadcrumbs (default) */
.aw-breadcrumbs__list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}

.aw-breadcrumbs__item{
  display: flex;
  gap: 6px;
  align-items: center;
}

.aw-breadcrumbs__sep{ opacity: .6; }

.aw-breadcrumbs__link{
  color: rgba(255,255,255,0.88);
  text-decoration: none;
}
.aw-breadcrumbs__link:hover{ text-decoration: underline; }

.aw-breadcrumbs__current{ opacity: .85; }

.aw-service-hero-desc{ margin-top: 8px; }

/* ✅ FIX: Breadcrumbs readable on LIGHT hero background */
.aw-service-hero .aw-breadcrumbs__sep{
  color: rgba(0,0,0,.35);
  opacity: 1;
}
.aw-service-hero .aw-breadcrumbs__link{
  color: #0b2b33;
  opacity: 0.9;
}
.aw-service-hero .aw-breadcrumbs__link:hover{
  color: #061a1f;
  text-decoration: underline;
}
.aw-service-hero .aw-breadcrumbs__current{
  color: #0b2b33;
  opacity: 0.75;
}
.aw-service-hero .aw-breadcrumbs__list{ margin: 0 0 10px; }

/* tip box — readable on LIGHT hero background */
.aw-service-tip{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0, 196, 204, 0.08);
  color: #0b2b33;
}

.aw-service-tip__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,196,204,0.35);
  background: rgba(0,196,204,0.12);
  flex: 0 0 28px;
}

.aw-service-tip__text{
  line-height: 1.55;
  color: #0b2b33;
}

/* right media */
.aw-service-hero-media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  min-height: 240px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.aw-service-hero-media img{
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.aw-service-hero-badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

@media (max-width: 900px){
  .aw-service-hero-grid{ grid-template-columns: 1fr; }
  .aw-service-hero-media{ min-height: 220px; }
  .aw-service-hero-media img{ min-height: 220px; }
}

/* =========================================================
   CARDS (dark)
========================================================= */
.aw-main .aw-section .aw-card {
  background: rgba(0, 34, 44, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.aw-main .aw-section .aw-card__body { color: rgba(255,255,255,0.92); }

.aw-main .aw-section .aw-card__body h2,
.aw-main .aw-section .aw-card__body h3 {
  color: #ffffff;
  margin-bottom: 10px;
}

.aw-main .aw-section .aw-card__body p,
.aw-main .aw-section .aw-card__body li,
.aw-main .aw-section .aw-card__body div,
.aw-main .aw-section .aw-card__body span {
  color: rgba(255,255,255,0.88);
}

.aw-main .aw-section .aw-card__body ul {
  margin: 0;
  padding-left: 18px;
}
.aw-main .aw-section .aw-card__body li { line-height: 1.5; }

/* ---------- Form controls ---------- */
.aw-main .aw-section .aw-card__body form { margin-top: 6px; }

.aw-main .aw-section select,
.aw-main .aw-section input[type="text"],
.aw-main .aw-section input[type="search"] {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.aw-main .aw-section select:focus,
.aw-main .aw-section input[type="text"]:focus,
.aw-main .aw-section input[type="search"]:focus {
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 4px rgba(0, 196, 204, 0.18);
}

.aw-main .aw-section select option {
  background: #072a33;
  color: #ffffff;
}

/* helper text under filter */
.aw-main .aw-section .aw-card__body > div[style*="color:var(--aw-text-muted)"] {
  color: rgba(255,255,255,0.78) !important;
}

/* ---------- Buttons inside dark cards ---------- */
.aw-main .aw-section .aw-card .aw-btn { border-radius: 12px; }

.aw-main .aw-section .aw-card .aw-btn.aw-btn-outline-primary {
  color: rgba(255,255,255,0.92);
  border-color: rgba(0, 196, 204, 0.55);
  background: rgba(0, 196, 204, 0.08);
}
.aw-main .aw-section .aw-card .aw-btn.aw-btn-outline-primary:hover {
  background: rgba(0, 196, 204, 0.16);
}

/* =========================================================
   TEMPLATE CLASSES
========================================================= */
.aw-service-card { margin-top: 16px; }

/* filter layout */
.aw-service-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.aw-service-select {
  min-width: 260px;
  max-width: 520px;
}

/* meta line */
.aw-service-meta {
  margin-top: 10px;
  color: rgba(255,255,255,0.78);
}

/* header line on performers block */
.aw-service-headerline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* small badge "PRO спочатку" */
.aw-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}

/* =========================================================
   PERFORMERS GRID (✅ final: 1 / 2 / 3 columns + no stretching)
========================================================= */
.aw-service-grid{
  display: grid;
  gap: 14px;
  justify-content: start;
  align-items: stretch;

  /* default: 2 columns */
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

/* 3 columns on wide screens */
@media (min-width: 1100px){
  .aw-service-grid{
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
}

/* 1 column on mobile */
@media (max-width: 640px){
  .aw-service-grid{
    grid-template-columns: 1fr;
  }
}

/* performer card */
.aw-service-performer {
  background: rgba(0, 24, 32, 0.70);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;

  /* ✅ if there is only 1 card, it won't become a giant banner */
  width: 100%;
  max-width: 420px;
}

/* when there are 2-3 columns allow full width in column */
@media (min-width: 700px){
  .aw-service-performer{ max-width: none; }
}

.aw-service-performer:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  border-color: rgba(0,196,204,0.28);
}

.aw-service-performer__top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.aw-service-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aw-service-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aw-service-avatar__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.88);
}

.aw-service-performer__info { min-width: 0; }

.aw-service-performer__name {
  font-weight: 800;
  line-height: 1.15;
  color: rgba(255,255,255,0.94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.aw-service-performer__meta {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255,255,255,0.78);
  font-size: 14px;

  /* reserve space for top-right pill */
  padding-right: 58px;
}

.aw-service-performer__city {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* pills (✅ top-right smaller) */
.aw-service-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);

  position: absolute;
  top: 12px;
  right: 12px;
}

.aw-service-pill--pro {
  border-color: rgba(0,196,204,0.45);
  background: rgba(0,196,204,0.10);
}

.aw-service-pill--free {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

/* actions row */
.aw-service-performer__actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-service-btn-sm {
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1;
}

/* ✅ Nicer "Профіль" button (use this class in HTML if you want) */
.aw-service-btn-profile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  background: rgba(0, 196, 204, 0.10);
  border: 1px solid rgba(0, 196, 204, 0.55);
  color: rgba(255,255,255,0.92);
}
.aw-service-btn-profile:hover{
  background: rgba(0, 196, 204, 0.18);
  transform: translateY(-1px);
}

/* =========================================================
   Keep old inline-grid support (your earlier template)
========================================================= */
.aw-main .aw-section .aw-card__body > div[style*="display:grid"] {
  gap: 14px !important;
}

.aw-main .aw-section .aw-card__body > div[style*="display:grid"] .aw-card {
  background: rgba(0, 24, 32, 0.70);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.aw-main .aw-section .aw-card__body > div[style*="display:grid"] .aw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  border-color: rgba(0,196,204,0.28);
}

/* =========================================================
   Responsive tweaks
========================================================= */
@media (max-width: 640px) {
  .aw-main .aw-section .aw-card__body form {
    flex-direction: column;
    align-items: stretch !important;
  }

  .aw-service-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .aw-main .aw-section .aw-card__body form .aw-btn,
  .aw-service-filter .aw-btn {
    width: 100%;
    justify-content: center;
  }

  .aw-main .aw-section select,
  .aw-service-select {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
  }

  .aw-service-headerline {
    flex-direction: column;
    align-items: flex-start;
  }
}