/* ===== BEACH PAGE STYLES (plyazhi.css) ===== */

/* Hero override */
.hero--beach {
  background: linear-gradient(135deg, #0d4f8b 0%, #1565c0 30%, #0097a7 70%, #00bfa5 100%);
}

/* ===== OVERVIEW GRID ===== */
.bp-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ===== SVG MAP ===== */
.bp-map-wrap {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.bp-map {
  width: 100%;
  height: auto;
  min-width: 700px;
}

.bp-map__dot {
  cursor: pointer;
  transition: all 0.2s ease;
}

.bp-map__dot:hover {
  r: 11;
  filter: brightness(1.2);
}

.bp-map__dot-link:hover text {
  font-weight: 700;
  fill: var(--color-primary);
}

/* ===== BEACH CARDS ===== */
.bp-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.bp-cards-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.bp-card {
  display: flex;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--color-border);
}

.bp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.bp-card--featured {
  border: 2px solid var(--color-primary);
}

.bp-card__img {
  width: 220px;
  min-height: 280px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Image gradients */
.bp-card__img--centralny { background: linear-gradient(135deg, #1a73e8, #00c6fb); }
.bp-card__img--chayka { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.bp-card__img--ogonek { background: linear-gradient(135deg, #f093fb, #f5576c); }
.bp-card__img--mandarin { background: linear-gradient(135deg, #f7971e, #ffd200); }
.bp-card__img--lego { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.bp-card__img--yuzhny2 { background: linear-gradient(135deg, #a8c0ff, #3f2b96); }
.bp-card__img--vzmorye { background: linear-gradient(135deg, #7b1fa2, #e040fb); }
.bp-card__img--chkalovsky { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.bp-card__img--barrakuda { background: linear-gradient(135deg, #00897b, #26a69a); }
.bp-card__img--fregat { background: linear-gradient(135deg, #3949ab, #7986cb); }
.bp-card__img--korall { background: linear-gradient(135deg, #ef6c00, #ffb74d); }
.bp-card__img--znanie { background: linear-gradient(135deg, #6a1b9a, #ba68c8); }
.bp-card__img--sssr { background: linear-gradient(135deg, #c62828, #ef5350); }
.bp-card__img--delfin { background: linear-gradient(135deg, #00838f, #4dd0e1); }
.bp-card__img--neptun { background: linear-gradient(135deg, #1565c0, #64b5f6); }
.bp-card__img--imeretinsky { background: linear-gradient(135deg, #e65100, #ff9800); }
.bp-card__img--radisson { background: linear-gradient(135deg, #ffd54f, #fff8e1); }
.bp-card__img--barkhatnye { background: linear-gradient(135deg, #d84315, #ff8a65); }
.bp-card__img--grace { background: linear-gradient(135deg, #00695c, #4db6ac); }
.bp-card__img--hotel-imer { background: linear-gradient(135deg, #bf360c, #ff7043); }
.bp-card__img--nudist { background: linear-gradient(135deg, #78909c, #b0bec5); }
.bp-card__img--dikie { background: linear-gradient(135deg, #558b2f, #aed581); }

.bp-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.bp-card__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.bp-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.bp-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 16px;
  white-space: nowrap;
}

.bp-card__badge--free {
  background: #e8f5e9;
  color: #2e7d32;
}

.bp-card__badge--paid {
  background: #fff3e0;
  color: #e65100;
}

.bp-card__badge--top {
  background: #fff8e1;
  color: #f57f17;
}

.bp-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bp-card__tag {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 16px;
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
}

.bp-card__tag--type {
  background: #e3f2fd;
  color: #1565c0;
}

.bp-card__tag--size {
  background: #f3e5f5;
  color: #7b1fa2;
}

.bp-card__tag--premium {
  background: #fff3e0;
  color: #e65100;
}

.bp-card__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.bp-card__attr {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bp-card__attr-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.bp-card__text {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.bp-card__verdict {
  font-size: 13px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== SANDY BEACHES ===== */
.bp-sand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.bp-sand-card {
  border-radius: var(--radius);
  padding: 28px 24px;
}

.bp-sand-card--free {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
}

.bp-sand-card--paid {
  background: #fff3e0;
  border: 1px solid #ffcc80;
}

.bp-sand-card__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.bp-sand-card__list {
  list-style: none;
  padding: 0;
}

.bp-sand-card__list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
  line-height: 1.5;
}

.bp-sand-card__list li:last-child {
  border-bottom: none;
}

.bp-tip-box {
  background: #e3f2fd;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

/* ===== KIDS GRID ===== */
.bp-kids-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bp-kids-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  transition: var(--transition);
}

.bp-kids-card:hover {
  box-shadow: var(--shadow-md);
}

.bp-kids-card--gold {
  border-color: #ffd54f;
  border-width: 2px;
}

.bp-kids-card--silver {
  border-color: #bdbdbd;
  border-width: 2px;
}

.bp-kids-card--bronze {
  border-color: #a1887f;
  border-width: 2px;
}

.bp-kids-card__rank {
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--color-primary);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.bp-kids-card--gold .bp-kids-card__rank { background: #f57f17; }
.bp-kids-card--silver .bp-kids-card__rank { background: #757575; }
.bp-kids-card--bronze .bp-kids-card__rank { background: #795548; }

.bp-kids-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.bp-kids-card__title a {
  color: var(--color-text);
}

.bp-kids-card__title a:hover {
  color: var(--color-primary);
}

.bp-kids-card__why {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ===== PRICES GRID ===== */
.bp-prices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bp-price-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.bp-price-card__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary);
}

.bp-price-card__list {
  list-style: none;
  padding: 0;
}

.bp-price-card__list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.bp-price-card__list li:last-child {
  border-bottom: none;
}

/* ===== COMPARISON TABLE ===== */
.bp-table-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.bp-comparison-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bp-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 700px;
}

.bp-comparison-table th {
  background: var(--color-primary);
  color: #fff;
  text-align: left;
  padding: 14px 12px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.bp-comparison-table th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}

.bp-comparison-table th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

.bp-comparison-table td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.bp-comparison-table tbody tr:hover td {
  background: var(--color-bg-alt);
}

.bp-comparison-table tbody tr.hidden {
  display: none;
}

.bp-comparison-table td a {
  font-weight: 600;
}

/* ===== TEMPERATURE CHART ===== */
.bp-temp-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  height: 240px;
  padding: 0;
  margin-bottom: 32px;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 20px 32px 16px;
}

.bp-temp-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 100px;
}

.bp-temp-bar__col {
  width: 100%;
  height: var(--bar-h, 60px);
  background: linear-gradient(180deg, #1a73e8 0%, #64b5f6 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all 0.3s ease;
}

.bp-temp-bar--peak .bp-temp-bar__col {
  background: linear-gradient(180deg, #e65100 0%, #ff9800 100%);
}

.bp-temp-bar:hover .bp-temp-bar__col {
  filter: brightness(1.1);
  transform: scaleY(1.06);
  transform-origin: bottom;
}

.bp-temp-bar__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.bp-temp-bar__label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.bp-temp-rec {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.bp-temp-rec__item {
  flex: 1;
  min-width: 200px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bp-temp-rec__item strong {
  font-size: 14px;
}

.bp-temp-rec__item span {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 500;
}

/* ===== TIPS GRID ===== */
.bp-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ===== ACCOMMODATION EXTRA (reused) ===== */
.accommodation-extra {
  margin-top: 32px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .bp-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-cards-grid {
    grid-template-columns: 1fr;
  }

  .bp-kids-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-prices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bp-overview-grid {
    grid-template-columns: 1fr;
  }

  .bp-card {
    flex-direction: column;
  }

  .bp-card__img {
    width: 100%;
    height: 180px;
    min-height: 180px;
  }

  .bp-card__attrs {
    grid-template-columns: 1fr;
  }

  .bp-sand-grid {
    grid-template-columns: 1fr;
  }

  .bp-kids-grid,
  .bp-prices-grid,
  .bp-tips-grid {
    grid-template-columns: 1fr;
  }

  .bp-temp-chart {
    gap: 8px;
    height: 200px;
  }

  .bp-temp-bar__value {
    font-size: 13px;
  }

  .bp-temp-rec {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .bp-temp-chart {
    gap: 4px;
    height: 160px;
  }

  .bp-temp-bar__value {
    font-size: 11px;
  }

  .bp-temp-bar__label {
    font-size: 11px;
  }

  .bp-cards-grid--2col {
    grid-template-columns: 1fr;
  }
}