/* ========================================
         GOOGLE FONTS IMPORT
======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Lora:ital,wght@0,400;0,700;1,400&display=swap');


.view-article.guides-blog-category {


    /* ========================================
     CSS VARIABLES & ROOT CONFIGURATION
    ======================================== */
    /* A :root-ban definiált változók mostantól ennek az osztálynak a lokális változói. */
    --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;
    --primary: #2c3e50;
    --secondary: #3498db;
    --accent: #e74c3c;
    --light: #ecf0f1;
    --dark: #2c3e50;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --gray: #95a5a6;
    --bg-primary: #f8f9fa;
    --bg-white: #ffffff;
    --bg-highlight: #e9ecef;
    --text-primary: #333;
    --text-white: #ffffff;
    --text-blue: #1e3a8a;
    --text-green: #15803d;
    --text-red: #dc2626;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 0.5rem;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;

    /* ========================================
     RESET & BASE STYLES
    ======================================== */
    /* Megjegyzés: Ezek a globális stílusok (pl. html, body, *) mostantól csak a 
       .view-article.guides-blog-category elemen belüli leszármazottakra vonatkoznak. */
    *,
    *::before,
    *::after {
        /*margin: 0;*/
        padding: 0;
        box-sizing: border-box;
    }


    &body {
        font-family: var(--font-serif);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.6;
        margin: 0;
    }

    /* ========================================
     TYPOGRAPHY
    ======================================== */
    h1, h2, h3, h4, h5, h6, .heading-font {
        font-family: var(--font-sans);
        font-weight: inherit;
        margin: 0;
    }

    h1 {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-sm);
    }

    a {
        color: inherit;
        text-decoration: inherit;
    }

    b, strong {
        font-weight: bolder;
    }

    small {
        font-size: 80%;
    }

    /* ========================================
     LAYOUT COMPONENTS
    ======================================== */
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--spacing-xl) var(--spacing-md);
    }

    /* Responsive container breakpoints */
    @media (min-width: 640px) {
        .container { max-width: 640px; }
    }

    @media (min-width: 768px) {
        .container { max-width: 768px; }
    }

    @media (min-width: 1024px) {
        .container { max-width: 1024px; }
    }

    @media (min-width: 1280px) {
        .container { max-width: 1280px; }
    }

    @media (min-width: 1536px) {
        .container { max-width: 1536px; }
    }

    /* ========================================
     HEADER & HERO SECTION
    ======================================== */
    header {
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        color: var(--text-white);
        padding: var(--spacing-xl) var(--spacing-md);
        text-align: center;
    }

    .hero-bg {
        background-image: url('https://placehold.co/1200x600/334155/e2e8f0?text=Dublin+Skyline');
        background-size: cover;
        background-position: center;
    }

    .subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 800px;
        margin: 0 auto;
    }

    /* ========================================
     ACCOMMODATION TYPES & CARDS
    ======================================== */
    .accommodation-types {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .type-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-md);
        flex: 1;
        min-width: 200px;
        text-align: center;
        transition: all var(--transition-fast);
        cursor: pointer;
        border: 2px solid transparent;

        &:hover {
            transform: translateY(-5px);
        }

        &.active {
            border-color: var(--secondary);
            box-shadow: var(--shadow-lg);
        }

        h3 {
            color: var(--primary);
            margin-bottom: var(--spacing-sm);
        }
    }

    /* ========================================
     COMPARISON TABLES & SECTIONS
    ======================================== */
    .comparison-section {
        margin-bottom: var(--spacing-2xl);
    }

    .section-title {
        background-color: var(--primary);
        color: var(--text-white);
        padding: var(--spacing-md);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        margin-bottom: 0;
        cursor: pointer;
        position: relative;
        user-select: none;

        &::after {
            content: ' ▼';
            position: absolute;
            right: var(--spacing-md);
            transition: transform var(--transition-fast);
        }

        &.collapsed::after {
            transform: rotate(-90deg);
        }
    }

    .comparison-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--bg-white);
        box-shadow: var(--shadow-md);
        margin-bottom: var(--spacing-xl);
        table-layout: fixed;

        th,
        td {
            padding: var(--spacing-md);
            text-align: left;
            border: 1px solid #ddd;
            word-wrap: break-word;
        }

        th:first-child,
        td:first-child {
            width: 15%;
        }

        th {
            background-color: var(--text-blue);
            color: var(--text-white);
            font-weight: 600;
        }

        tr:nth-child(even) {
            background-color: #f1f5f9;
        }

        .highlight {
            background-color: var(--bg-highlight) !important;
        }

        tbody tr.hidden-row {
            display: none;
        }
    }

    /* ========================================
     STATUS INDICATORS
    ======================================== */
    .yes {
        color: var(--success);
        font-weight: 600;
    }

    .no {
        color: var(--danger);
        font-weight: 600;
    }

    .partly {
        color: var(--warning);
        font-weight: 600;
    }

    .price {
        font-weight: 600;
        color: var(--dark);
    }

    /* ========================================
     FEATURE CATEGORIES
    ======================================== */
    .feature-category {
        background-color: var(--light);
        font-weight: 600;
        cursor: pointer;
        user-select: none;

        td {
            text-align: center;
            position: relative;

            &::after {
                content: ' ▼';
                position: absolute;
                right: var(--spacing-md);
                top: 50%;
                transform: translateY(-50%);
                transition: transform var(--transition-fast);
            }
        }

        &.collapsed td::after {
            transform: translateY(-50%) rotate(-90deg);
        }
    }

    /* ========================================
     TABS & TOGGLE SWITCH
    ======================================== */
    .tabs-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .toggle-label {
        font-weight: 600;
        color: var(--primary);
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;

        input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: var(--transition-medium);
            border-radius: 34px;

            &::before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: var(--bg-white);
                transition: var(--transition-medium);
                border-radius: 50%;
            }
        }

        input:checked + .slider {
            background-color: var(--secondary);
        }

        input:focus + .slider {
            box-shadow: 0 0 1px var(--secondary);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }
    }

    /* ========================================
     SPECIAL CONTENT CARDS
    ======================================== */
    .pull-quote {
        border-left: 4px solid var(--secondary);
        font-style: italic;
        color: var(--text-blue);
        padding-left: var(--spacing-md);
    }

    .cost-card {
        background-color: #e0f2fe;
        border: 1px solid #bae6fd;
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
    }

    .pros-cons-card {
        background-color: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: var(--radius-md);
        padding: var(--spacing-md);

        h4 {
            color: var(--text-green);
        }
    }

    /* ========================================
     UTILITY CLASSES
    ======================================== */
    .sticky { position: sticky; }
    .flex { display: flex; }
    .grid { display: grid; }
    .overflow-x-auto { overflow-x: auto; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .w-full { width: 100%; }
    .h-auto { height: auto; }
    .shadow-md { box-shadow: var(--shadow-md); }
    .shadow-lg { box-shadow: var(--shadow-lg); }
    .rounded-lg { border-radius: var(--radius-lg); }
    .mb-2 { margin-bottom: var(--spacing-sm); }
    .mb-4 { margin-bottom: var(--spacing-md); }
    .mb-6 { margin-bottom: var(--spacing-lg); }
    .mb-8 { margin-bottom: var(--spacing-xl); }
    .mb-12 { margin-bottom: var(--spacing-2xl); }
    .mt-4 { margin-top: var(--spacing-md); }
    .mt-6 { margin-top: var(--spacing-lg); }
    .mt-8 { margin-top: var(--spacing-xl); }
    .mt-12 { margin-top: var(--spacing-2xl); }
    .mt-16 { margin-top: var(--spacing-3xl); }
    .my-6 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
    .mr-2 { margin-right: var(--spacing-sm); }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .p-4 { padding: var(--spacing-md); }
    .p-6 { padding: var(--spacing-lg); }
    .p-8 { padding: var(--spacing-xl); }
    .px-6 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
    .pb-2 { padding-bottom: var(--spacing-sm); }
    .text-xs { font-size: 0.75rem; line-height: 1rem; }
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .font-light { font-weight: 300; }
    .font-bold { font-weight: 700; }
    .font-black { font-weight: 900; }
    .uppercase { text-transform: uppercase; }
    .leading-relaxed { line-height: 1.625; }
    .tracking-wider { letter-spacing: 0.05em; }
    .text-white { color: var(--text-white); }
    .text-blue-800 { color: var(--text-blue); }
    .text-green-600 { color: var(--text-green); }
    .text-red-600 { color: var(--text-red); }
    .text-slate-800 { color: #1e293b; }
    .bg-black { background-color: #000000; }
    .bg-slate-800 { background-color: #1e293b; }
    .bg-opacity-50 { --tw-bg-opacity: 0.5; }
    .border-b { border-bottom-width: 1px; }
    .border-b-4 { border-bottom-width: 4px; }
    .border-blue-500 { border-color: #3b82f6; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .items-start { align-items: flex-start; }
    .gap-8 { gap: var(--spacing-xl); }
    .max-w-4xl { max-width: 56rem; }
    .top-8 { top: var(--spacing-xl); }
    .space-y-2 > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--spacing-sm);
    }
    .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--spacing-xl);
    }
    .space-y-16 > :not([hidden]) ~ :not([hidden]) {
        margin-top: var(--spacing-3xl);
    }

    /* ========================================
     FOOTER
    ======================================== */
    footer {
        background-color: var(--dark);
        color: var(--text-white);
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-md);
        margin-top: var(--spacing-xl);
    }

    /* ========================================
     RESPONSIVE DESIGN
    ======================================== */
    @media (max-width: 768px) {
        .accommodation-types {
            flex-direction: column;
        }
        
        .comparison-table {
            display: block;
            overflow-x: auto;
        }
        
        #g-page-surround {
            overflow: unset;
        }
    }

    @media (min-width: 768px) {
        .md\:p-8 { padding: var(--spacing-xl); }
        .md\:p-16 { padding: var(--spacing-3xl); }
        .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    }

    @media (min-width: 1024px) {
        .lg\:col-span-1 { grid-column: span 1 / span 1; }
        .lg\:col-span-2 { grid-column: span 2 / span 2; }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .lg\:p-24 { padding: 6rem; }
    }

    /* ========================================
     SPECIAL OVERRIDES FOR VIEW-ARTICLE
    ======================================== */
    #g-page-surround {
        overflow: unset;
    }
}