/**
 * Attractions Pages - strony atrakcji turystycznych
 * Lista atrakcji, strona pojedynczej atrakcji, typy, województwa
 */

/* ==========================================
   ATTRACTIONS INDEX PAGE
   ========================================== */
.attractions-index-page {
    padding: var(--spacing-xl) 0;
}

.attractions-index-page section {
    margin-bottom: var(--spacing-2xl);
}

.attractions-index-page h2 {
    margin-bottom: var(--spacing-lg);
    color: var(--text);
}

/* ==========================================
   ATTRACTIONS GRID (listy atrakcji)
   ========================================== */
.attractions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.attractions-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ==========================================
   ATTRACTION CARD (na listach)
   ========================================== */
.attraction-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.attraction-card .attraction-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.attraction-card .attraction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.attraction-card:hover .attraction-image img {
    transform: scale(1.05);
}

.attraction-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--gray-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.attraction-placeholder .attraction-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.attraction-type-label {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.attraction-card .attraction-content {
    padding: var(--spacing-md);
}

.attraction-card h3 {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.1rem;
    line-height: 1.3;
}

.attraction-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.attraction-card h3 a:hover {
    color: var(--primary);
}

.attraction-card .attraction-location {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.attraction-card .attraction-location a {
    color: var(--text-muted);
    text-decoration: none;
}

.attraction-card .attraction-location a:hover {
    color: var(--primary);
}

.attraction-card .attraction-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.attraction-card .attraction-distance {
    margin-top: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 500;
}

/* ==========================================
   VOIVODESHIPS GRID
   ========================================== */
.voivodeships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.voivodeship-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.voivodeship-card:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.voivodeship-card .voivodeship-name {
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.voivodeship-card .voivodeship-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ==========================================
   TYPES CARDS GRID
   ========================================== */
.attractions-types-section {
    margin: 3rem 0;
    text-align: center;
}

.attractions-types-section h2 {
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.types-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #4CAF50);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.type-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 12px 24px rgba(46, 125, 50, 0.15);
}

.type-card:hover::before {
    transform: scaleX(1);
}

.type-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.type-card:hover .type-card-icon {
    transform: scale(1.15);
}

.type-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 0.25rem;
}

.type-card-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==========================================
   BREADCRUMB (dla strony atrakcji)
   ========================================== */
.breadcrumb {
    padding: 1rem 0;
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb svg {
    width: 16px;
    height: 16px;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.breadcrumb span {
    color: var(--foreground);
    font-weight: 500;
}

/* ==========================================
   ATTRACTION PAGE (pojedyncza strona)
   ========================================== */
.attraction-page {
    padding: 2rem 0;
}

/* ==========================================
   GALERIA - jedno zdjęcie
   ========================================== */
.gallery-single {
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 500px;
}

.gallery-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   GALERIA - siatka główna (2+ zdjęć)
   ========================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 0;
        height: 500px;
    }
}

/* Główne zdjęcie */
.gallery-main-photo {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .gallery-main-photo {
        border-radius: var(--radius) 0 0 var(--radius);
        height: 100%;
    }
}

.gallery-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-main-photo:hover img {
    transform: scale(1.02);
}

/* Przycisk "Pokaż wszystkie" */
.gallery-show-all {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    background-color: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.gallery-show-all:hover {
    background-color: white;
    box-shadow: var(--shadow);
}

.gallery-show-all svg {
    width: 16px;
    height: 16px;
}

/* Mini siatka 2x2 */
.gallery-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
}

@media (min-width: 768px) {
    .gallery-mini-grid {
        height: 100%;
    }
}

.gallery-mini-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .gallery-mini-item {
        border-radius: 0;
    }

    .gallery-mini-item:nth-child(2) {
        border-radius: 0 var(--radius) 0 0;
    }

    .gallery-mini-item:nth-child(4) {
        border-radius: 0 0 var(--radius) 0;
    }
}

.gallery-mini-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-mini-item:hover img {
    transform: scale(1.05);
}

/* ==========================================
   HIGHLIGHT TAGS pod galerią
   ========================================== */
.attraction-highlight-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.highlight-tag {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    font-size: 0.8125rem;
    color: #16a34a;
}

.dark .highlight-tag {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* ==========================================
   INFO TAGS - dyskretne tagi (opłaty, indoor/outdoor)
   Wyświetlane na dole sekcji "Co wyróżnia"
   ========================================== */
.info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

.info-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid;
}

/* Warianty kolorów */
.info-tag--green  { color: #15803d; border-color: rgba(34,197,94,0.3);  background: rgba(34,197,94,0.08); }
.info-tag--amber  { color: #92400e; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); }
.info-tag--blue   { color: #075985; border-color: rgba(2,132,199,0.3);  background: rgba(2,132,199,0.08); }
.info-tag--teal   { color: #115e59; border-color: rgba(20,184,166,0.3); background: rgba(20,184,166,0.08); }
.info-tag--indigo { color: #3730a3; border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.08); }
.info-tag--violet { color: #5b21b6; border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.08); }

/* Dark mode */
.dark .info-tags   { border-top-color: rgba(255,255,255,0.1); }
.dark .info-tag--green  { color: #4ade80; background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.25); }
.dark .info-tag--amber  { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
.dark .info-tag--blue   { color: #38bdf8; background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.25); }
.dark .info-tag--teal   { color: #5eead4; background: rgba(20,184,166,0.12); border-color: rgba(20,184,166,0.25); }
.dark .info-tag--indigo { color: #a5b4fc; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); }
.dark .info-tag--violet { color: #c4b5fd; background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.25); }

/* ==========================================
   NAGŁÓWEK ATRAKCJI
   ========================================== */
.attraction-header {
    margin-bottom: 2rem;
}

.attraction-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.attr-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.attr-badge svg {
    width: 16px;
    height: 16px;
}

.attr-badge-category {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.dark .attr-badge-category {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.attraction-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.attraction-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 768px) {
    .attraction-header h1 {
        font-size: 2.25rem;
    }
}

.attraction-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Przycisk edycji dla admina */
.btn-admin-edit {
    text-decoration: none;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-icon-outline {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.btn-icon-outline:hover {
    border-color: var(--primary);
    background-color: rgba(2, 132, 199, 0.05);
}

.btn-icon-outline svg {
    width: 20px;
    height: 20px;
}

/* Typy atrakcji - minimalistyczne tagi z ramką */
.attraction-type-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.attraction-type-line .type-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.attraction-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.attraction-meta .attraction-location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}

.attraction-meta .attraction-location svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.attraction-rating {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.attraction-rating svg {
    width: 16px;
    height: 16px;
    color: #eab308;
}

.rating-count {
    font-weight: 400;
    color: var(--muted-foreground);
}

/* ==========================================
   LAYOUT: Content + Sidebar
   ========================================== */
.attraction-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .attraction-layout {
        grid-template-columns: 3fr 1fr;
    }
}

/* ==========================================
   SEKCJE na stronie atrakcji
   ========================================== */
.attr-section {
    display: block;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    margin-bottom: 1.5rem;
}

.attr-section:last-child {
    margin-bottom: 0;
}

.attr-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.attr-section h2 svg {
    width: 20px;
    height: 20px;
    color: #22c55e;
    flex-shrink: 0;
}

.attr-section-body {
    display: block;
    width: 100%;
}

/* ==========================================
   HIGHLIGHTS GRID (co wyróżnia)
   ========================================== */
.highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 640px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 14px;
}

.highlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    flex-shrink: 0;
}

/* ==========================================
   AUDIENCE TAGS (dla kogo)
   ========================================== */
.audience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.audience-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-alt, #f3f4f6);
    border-radius: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
    transition: all 0.2s;
    cursor: default;
}

.audience-tag:hover {
    background: var(--primary-light, #dbeafe);
    color: var(--primary, #0d7ec9);
}

.audience-icon {
    font-size: 1.1em;
}

@media (max-width: 480px) {
    .audience-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
}

/* ==========================================
   OPIS
   ========================================== */
.attraction-description {
    width: 100%;
}

.attraction-description p {
    line-height: 1.7;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.attraction-description p:last-child {
    margin-bottom: 0;
}

.attraction-description h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--foreground);
}

.attraction-description ul {
    list-style: disc;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.attraction-description ol {
    list-style: decimal;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.attraction-description ul li,
.attraction-description ol li {
    line-height: 1.7;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.attraction-description ul li:last-child,
.attraction-description ol li:last-child {
    margin-bottom: 0;
}

.attraction-description strong {
    font-weight: 600;
    color: var(--foreground);
}

/* ==========================================
   INFO GRID
   ========================================== */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.info-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background-color: rgba(2, 132, 199, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.info-value {
    font-weight: 500;
}

/* ==========================================
   TIPS LIST (wskazówki)
   ========================================== */
.tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.tips-list li svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==========================================
   MAPA
   ========================================== */
.map-container {
    margin-bottom: 1rem;
}

#attractionMap {
    height: 400px;
    border-radius: var(--radius);
    z-index: 1;
}

/* Pinezka/łezka na mapie atrakcji */
.attraction-marker {
    background: none !important;
    border: none !important;
}

.attraction-pin {
    position: relative;
    width: 32px;
    height: 44px;
}

.attraction-pin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow:
        0 2px 8px rgba(220, 38, 38, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.15);
    border: 3px solid #fff;
}

.attraction-pin::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Kropka w środku pinezki */
.attraction-pin-dot {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    z-index: 1;
}

/* Cień pod pinezką */
.attraction-pin-shadow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 6px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.25) 0%, transparent 70%);
}

/* Animacja przy hover (opcjonalna) */
.attraction-marker:hover .attraction-pin::before {
    transform: rotate(-45deg) scale(1.05);
    box-shadow:
        0 4px 12px rgba(220, 38, 38, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.2);
}

.map-address {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}

.map-address p {
    margin-bottom: 0.5rem;
}

.map-address p:last-child {
    margin-bottom: 0;
}

.map-coords {
    font-size: 0.8125rem;
    color: var(--muted-foreground) !important;
    font-weight: 400 !important;
}

/* ==========================================
   SEKCJA DOJAZD
   ========================================== */
.transport-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transport-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--muted);
    border-radius: var(--radius);
}

.transport-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.transport-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.transport-content h4 {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.transport-content p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================
   SIDEBAR
   ========================================== */
.attraction-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .attraction-sidebar {
        position: sticky;
        top: 80px;
        height: fit-content;
    }
}

.sidebar-card {
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
}

.sidebar-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.sidebar-card-header a {
    font-size: 0.875rem;
    color: var(--primary);
    text-decoration: none;
}

.sidebar-card-header a:hover {
    text-decoration: underline;
}

/* ==========================================
   NEARBY LISTINGS
   ========================================== */
.nearby-listings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Nearby card - styl jak listing-card */
.nearby-card {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background-color: var(--card);
    transition: box-shadow 0.2s;
    text-decoration: none;
}

.nearby-card:hover {
    box-shadow: var(--shadow-lg);
}

.nearby-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.nearby-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.nearby-card:hover .nearby-card-image img {
    transform: scale(1.05);
}

.nearby-card-rating {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.nearby-card-rating svg {
    width: 12px;
    height: 12px;
    color: #eab308;
}

.nearby-card-content {
    padding: 0.75rem;
}

.nearby-card-content h4 {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
    transition: color 0.2s;
    color: var(--foreground);
}

.nearby-card:hover .nearby-card-content h4 {
    color: var(--primary);
}

.nearby-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nearby-card-distance {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.nearby-card-distance svg {
    width: 14px;
    height: 14px;
}

.nearby-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.nearby-card-price .price {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--foreground);
}

.nearby-card-price .per-night {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* ==========================================
   RELATED ATTRACTIONS
   ========================================== */
.related-attractions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: border-color 0.2s;
}

.related-item:hover {
    border-color: var(--primary);
}

.related-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background-color: rgba(2, 132, 199, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.related-icon svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.related-info {
    flex: 1;
    min-width: 0;
}

.related-name {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--foreground);
}

.related-distance {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* ==========================================
   CONTACT INFO
   ========================================== */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.contact-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.contact-item a {
    color: var(--primary);
}

.contact-item a:hover {
    text-decoration: underline;
}

/* ==========================================
   ATTRACTIONS GRID 3 KOLUMNY (podobne)
   ========================================== */
.attractions-grid-3col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .attractions-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .attractions-grid-3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
   ATTRACTION CARD MINI (powiązane atrakcje)
   ========================================== */
.attraction-card-mini {
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
}

.attraction-card-mini:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.attraction-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.attraction-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.attraction-card-mini:hover .attraction-card-image img {
    transform: scale(1.05);
}

.attraction-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    font-weight: 500;
    color: #1f2937;
}

.dark .attraction-card-badge {
    background-color: rgba(0,0,0,0.7);
    color: #f3f4f6;
}

.attraction-card-mini .attraction-card-content {
    padding: 1rem;
}

.attraction-card-mini .attraction-card-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    transition: color 0.2s;
    color: var(--foreground);
}

.attraction-card-mini:hover .attraction-card-content h3 {
    color: var(--primary);
}

.attraction-card-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.attraction-card-location svg {
    width: 14px;
    height: 14px;
}

/* ==========================================
   LIGHTBOX
   ========================================== */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.95);
    z-index: 200;
    display: none;
    flex-direction: column;
}

.gallery-lightbox.active {
    display: flex;
}

.lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    color: white;
}

.lightbox-counter {
    font-size: 0.9375rem;
}

.lightbox-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.lightbox-close:hover {
    background-color: rgba(255,255,255,0.1);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
}

.lightbox-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.lightbox-nav:hover {
    background-color: rgba(255,255,255,0.2);
}

.lightbox-nav svg {
    width: 24px;
    height: 24px;
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

/* ==========================================
   POLECANY CZAS ZWIEDZANIA
   ========================================== */
.visit-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.visit-time-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    border: 2px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.visit-time-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.visit-time-short {
    border-top: 4px solid #22c55e;
}

.visit-time-medium {
    border-top: 4px solid #3b82f6;
}

.visit-time-long {
    border-top: 4px solid #8b5cf6;
}

.visit-time-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.visit-time-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.visit-time-duration {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.visit-time-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.visit-time-general {
    max-width: 500px;
}

.visit-time-general .visit-time-card {
    border-top: 4px solid var(--primary);
}

/* ==========================================
   FAQ - CZĘSTO ZADAWANE PYTANIA
   ========================================== */
.attr-section-faq {
    margin-top: var(--spacing-xl);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.faq-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item[open] {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    transition: background 0.2s;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: var(--spacing-md);
}

.faq-item[open] .faq-question::after {
    content: '−';
}

.faq-question:hover {
    background: var(--bg-muted);
}

.faq-answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 0;
    padding-top: var(--spacing-md);
}

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

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

    .lightbox-nav {
        width: 36px;
        height: 36px;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }

    /* Polecany czas zwiedzania - responsywność */
    .visit-time-grid {
        grid-template-columns: 1fr;
    }

    .visit-time-card {
        padding: var(--spacing-md);
    }

    .visit-time-duration {
        font-size: 1.25rem;
    }

    /* FAQ - responsywność */
    .faq-question {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .voivodeships-grid {
        grid-template-columns: 1fr;
    }

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

/* ==========================================
   SEKCJA: ATRAKCJE W POBLIŻU (na stronie atrakcji)
   ========================================== */
.attr-section-nearby {
    margin-top: var(--spacing-xl);
}

.nearby-attractions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.nearby-attraction-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.nearby-attraction-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.nearby-attraction-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.nearby-attraction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.nearby-attraction-card:hover .nearby-attraction-image img {
    transform: scale(1.05);
}

.nearby-attraction-distance {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
}

.nearby-attraction-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.nearby-attraction-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nearby-attraction-content p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nearby-attraction-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
}

.nearby-attraction-location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Responsywność: Atrakcje w pobliżu */
@media (max-width: 1024px) {
    .nearby-attractions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .nearby-attractions-grid {
        grid-template-columns: 1fr;
    }

    .nearby-attraction-content h3 {
        font-size: 0.95rem;
    }
}