/* ===================================================================
   Modern theme - Editorial / Agency aesthetic
   Version: 1.0.10
   Author: Reveloni
   For: CMS 6.0.0+
   
   Characteristics: Georgia serif display, fixed transparent header
   with scroll effect, 85vh hero with radial gradient, soft rounded
   cards, fade-in on load. Professional editorial feel.
   
   Changelog:
     1.0.10 - Subpages: the header shows its "scrolled" look from the start.
              The transparent header with white text is designed for the hero;
              on subpages the light breadcrumbs bar sits under it, so the logo
              and Menu button were invisible until the page was scrolled. The
              home page is unchanged. Version line realigned with theme.json
              (it read 1.0.4; 1.0.5-1.0.9 were bumped in theme.json only).
     1.0.4 - Footer changed from flex justify-between to grid auto-fit:
             contact column now stays on the left regardless of how
             many footer sections are populated (fixes "kontakt skacze
             na prawo" bug). .animate-on-scroll now reads
             var(--animation-offset, 20px) so admin slider works.
     1.0.3 - Page card placeholder (no-image): gradient primary→secondary
             with radial overlay, book icon (📖). Subtle hover animation
             (background shift + icon scale).
     1.0.2 - Footer: dark background using --footer-bg (admin color
             selector now works). Added .copyright styling for centered
             admin link & Powered by strip. Added .cta-button and
             .price-tag styles (pill-shaped, primary/accent colors).
     1.0.1 - Removed default <li> bullet from nav (added nav ul reset).
             Footer redesigned: contact left, info right, stacks on mobile.
     1.0.0 - Initial release.
   =================================================================== */

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text: #1f2937;
    --text-light: #6b7280;
    --bg: #ffffff;
    --bg-light: #f9fafb;
    --border: #e5e7eb;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.1);
    
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    --font-display: Georgia, 'Times New Roman', Times, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="dark"] {
    --text: #f3f4f6;
    --text-light: #9ca3af;
    --bg: #111827;
    --bg-light: #1f2937;
    --border: rgba(255, 255, 255, 0.08);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* === BASE === */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg-light);
    transition: background var(--transition), color var(--transition);
    
    /* Fade-in on load */
    opacity: 0;
    transition: opacity 0.5s ease, background var(--transition), color var(--transition);
}

body.js-ready {
    opacity: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Animations (CMS framework) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 20px));
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

body:not([data-animations-enabled="true"]) .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
h2 { font-size: 2rem; margin-bottom: 1.25rem; margin-top: 2.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; margin-top: 2rem; }
h4 { font-size: 1.25rem; margin-bottom: 0.75rem; }

p {
    margin-bottom: 1.5rem;
    color: var(--text);
    font-size: 1rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: opacity var(--transition);
}

a:hover {
    opacity: 0.75;
}

strong {
    font-weight: 600;
}

/* === DARK MODE TOGGLE === */
.dark-mode-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text);
    z-index: 50;
    transition: all var(--transition);
}

.dark-mode-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* === HEADER === */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}

header.scrolled {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* Backdrop blur on a pseudo-element of the scrolled header (menu fix).
   Same reasoning as other themes: keep backdrop-filter off the element
   that contains the fixed dropdown. */
header.scrolled::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

[data-theme="dark"] header.scrolled {
    background: rgba(17, 24, 39, 0.85);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    gap: 2rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 80px;
    width: auto;
    transition: height var(--transition);
}

.logo-container a {
    color: inherit;
    text-decoration: none;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: color var(--transition), text-shadow var(--transition);
}

header.scrolled .site-title {
    color: var(--text);
    text-shadow: none;
}

/* === BREADCRUMBS === */
.breadcrumbs {
    padding: 1rem 0;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 120px; /* account for fixed header */
}

.breadcrumbs a {
    color: var(--text-light);
}

.breadcrumbs a:hover {
    color: var(--primary);
    opacity: 1;
}

.breadcrumbs span {
    margin: 0 0.5rem;
    color: var(--text-light);
    opacity: 0.5;
}

/* === NAVIGATION (Hamburger) === */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.hamburger-menu {
    position: relative;
}

.hamburger-btn {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition);
}

.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
}

header.scrolled .hamburger-btn {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text);
}

header.scrolled .hamburger-btn:hover {
    background: var(--border);
}

/* Subpages (1.0.10): the transparent header with white text is designed to
   sit on the hero. On subpages the breadcrumbs bar (light) sits under it
   instead, so the logo and the Menu button were invisible until the page was
   scrolled. Subpages now show the header in its "scrolled" look from the
   start; the home page keeps the transparent header over the hero.
   Separate rules on purpose: a browser without :has() drops only these, not
   the header.scrolled rules above (one invalid selector voids a whole list). */
body:has(.breadcrumbs) header {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

body:has(.breadcrumbs) header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

[data-theme="dark"] body:has(.breadcrumbs) header {
    background: rgba(17, 24, 39, 0.85);
}

body:has(.breadcrumbs) header .site-title {
    color: var(--text);
    text-shadow: none;
}

body:has(.breadcrumbs) header .hamburger-btn {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text);
}

body:has(.breadcrumbs) header .hamburger-btn:hover {
    background: var(--border);
}

/* Dropdown menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 250px;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    list-style: none;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.65rem 1.25rem;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: background var(--transition), color var(--transition);
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: var(--bg-light);
    color: var(--primary);
    opacity: 1;
}

.dropdown-submenu {
    padding-left: 1rem;
    font-size: 0.9rem;
    list-style: none;
    margin: 0;
}

.dropdown-submenu a {
    padding: 0.5rem 1.25rem;
}

.dropdown-subsubmenu {
    padding-left: 2rem;
    font-size: 0.85rem;
    list-style: none;
    margin: 0;
}

.dropdown-subsubmenu a {
    padding: 0.45rem 1.25rem;
}

/* === HERO === */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    overflow: hidden;
    margin-top: 0;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--bg-light), transparent);
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
    padding: 6rem 2rem;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* === CONTENT SECTIONS === */
.content-section {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 3rem;
    margin: 3rem 0;
    box-shadow: var(--shadow-md);
}

.content-section h1 {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.content-section h2 {
    font-size: 1.75rem;
    color: var(--text);
}

.content-section ul,
.content-section ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-section li {
    margin-bottom: 0.5rem;
}

/* === PAGE CARDS === */
.page-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding: 3rem 0;
}

.page-card {
    background: var(--bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}

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

.page-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--bg-light);
}

/* Placeholder when card has no image - editorial gradient with subtle radial overlay */
.page-card-placeholder {
    position: relative;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    background-size: 150% 150%;
    background-position: 0% 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background-position var(--transition-slow);
}

.page-card-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Hide the engine-provided emoji span and use our own icon via ::after */
.page-card-placeholder span {
    display: none;
}

.page-card-placeholder::after {
    content: '📖';
    position: relative;
    z-index: 1;
    font-size: 3.5rem;
    opacity: 0.5;
    transition: opacity var(--transition), transform var(--transition);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.page-card:hover .page-card-placeholder {
    background-position: 100% 100%;
}

.page-card:hover .page-card-placeholder::after {
    opacity: 0.75;
    transform: scale(1.05);
}

.page-card-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--text);
    letter-spacing: -0.01em;
}

.page-card-excerpt {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
}

.page-card-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    align-self: flex-start;
    transition: opacity var(--transition);
}

.page-card-link:hover {
    opacity: 0.75;
}

.page-card-link::after {
    content: ' →';
    transition: transform var(--transition);
    display: inline-block;
}

.page-card:hover .page-card-link::after {
    transform: translateX(4px);
}

/* === GALLERY === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

/* === LIGHTBOX === */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--transition);
}

.lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

/* === TESTIMONIALS === */
.testimonial-card {
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    font-style: italic;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.15;
    line-height: 1;
}

.testimonial-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.testimonial-author {
    font-style: normal;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.testimonial-author::before {
    content: '— ';
    color: var(--primary);
}

/* === CONTACT FORM === */
.contact-form {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin: 3rem auto;
}

.contact-form h2 {
    margin-top: 0;
    text-align: center;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.1);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

/* === BUTTONS === */
.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.9rem 2rem;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    opacity: 1;
}

.btn:active {
    transform: translateY(0);
}

/* === CTA BUTTON & PRICE TAG === */
.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.05rem;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: all var(--transition);
    margin-top: 1rem;
}

.cta-button:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 1;
}

.cta-button:active {
    transform: translateY(0);
}

.price-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-body);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--transition);
    margin-top: 0.5rem;
}

a.price-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 1;
}

/* === MESSAGES === */
.error, .success {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    border: 1px solid;
}

.error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.success {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

[data-theme="dark"] .error {
    background: rgba(220, 38, 38, 0.1);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .success {
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

/* === FOOTER === */
footer {
    background: var(--footer-bg, var(--text));
    color: #fff;
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem 3rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.footer-section {
    min-width: 0;
}

.footer-section h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.footer-section p {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.footer-section ul,
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li,
.footer-menu li {
    margin: 0.5rem 0;
}

.footer-section a,
.footer-menu a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition);
}

.footer-section a:hover,
.footer-menu a:hover {
    color: #fff;
    opacity: 1;
}

/* Copyright section - bottom strip with admin link & "Powered by" */
.copyright {
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.copyright p {
    margin: 0.25rem 0;
    color: inherit;
}

.copyright a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition);
}

.copyright a:hover {
    color: #fff;
    opacity: 1;
}

.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.social-links a {
    color: var(--text-light);
    transition: color var(--transition);
}

.social-links a:hover {
    color: var(--primary);
    opacity: 1;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .hero .container { padding: 5rem 2rem; }
    .content-section { padding: 2.5rem; }
}

@media (max-width: 768px) {
    /* Mobile menu fix (6.2.5): pin the dropdown to the screen and bind
       top AND bottom so its scroll area equals the visible viewport -
       reaches the last item in landscape. Paired with the body-scroll
       lock in script.js (prevents the page underneath from scrolling). */
    .dropdown-menu {
        position: fixed;
        top: 70px;
        bottom: 12px;
        left: auto;
        right: 8px;
        max-height: none;
        margin-top: 0;
        padding-bottom: 0.4rem;
        min-width: 220px;
    }

    .container { padding: 0 1.5rem; }
    .header-content { padding: 15px 0; }
    .logo-container img { height: 56px; }
    
    .hero { min-height: 70vh; }
    .hero .container { padding: 4rem 1.5rem; }
    
    .breadcrumbs { margin-top: 90px; }
    
    .content-section {
        padding: 2rem 1.5rem;
        border-radius: var(--radius-md);
    }
    .content-section h1 { font-size: 1.75rem; }
    .content-section h2 { font-size: 1.5rem; }
    
    .page-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.75rem;
    }
    
    .contact-form {
        padding: 2rem 1.5rem;
    }
    
    .dark-mode-toggle {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
    }
    
    .footer-content {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .hero { min-height: 60vh; }
    .hero .container { padding: 3rem 1rem; }
    
    .logo-container img { height: 48px; }
    .header-content { padding: 12px 0; }
    
    .breadcrumbs { margin-top: 78px; }
    
    .content-section { padding: 1.5rem 1rem; }
    
    .testimonial-card::before {
        font-size: 3rem;
    }
}

/* === PRINT === */
@media print {
    body { background: #fff; color: #000; opacity: 1; }
    header, footer, .dark-mode-toggle, .hamburger-btn, .hamburger-menu { display: none !important; }
    .hero {
        min-height: auto;
        padding: 2rem 0;
        background: none;
        color: #000;
    }
    .hero h1 { color: #000; text-shadow: none; }
    .content-section {
        background: #fff;
        box-shadow: none;
        border: 1px solid #ccc;
        padding: 1rem;
    }
}

/* === PLACEHOLDER COMPOSITIONS (v1.0.5) ===
   Editorial line-and-disc compositions; rearrange on hover. */
.page-card-placeholder {
    position: relative;
    overflow: hidden;
}

.page-card-placeholder span { display: none; }

.page-card-placeholder::before,
.page-card-placeholder::after {
    content: '';
    position: absolute;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    opacity: 1;
    width: auto;
    height: auto;
    inset: auto;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Composition 1: big disc above hairline baselines */
.page-card-placeholder::before {
    inset: 0;
    background:
        radial-gradient(circle at 30% 42%, var(--accent) 0 19%, transparent 19.5%),
        linear-gradient(0deg, transparent 27.5%, var(--border) 27.5% 28.2%, transparent 28.2%),
        linear-gradient(0deg, transparent 21.5%, var(--border) 21.5% 22.2%, transparent 22.2%);
}

.page-card-placeholder::after {
    width: 34px;
    height: 34px;
    top: 18%;
    right: 14%;
    background: var(--text);
    opacity: 0.85;
}

/* Composition 2: column rules + triangle */
.page-card:nth-child(2n) .page-card-placeholder::before {
    background:
        conic-gradient(from 60deg at 66% 56%, transparent 0 20deg,
            var(--accent) 20deg 80deg, transparent 80deg),
        repeating-linear-gradient(90deg, transparent 0 14px, var(--border) 14px 15px)
            left / 30% 100% no-repeat;
}

.page-card:nth-child(2n) .page-card-placeholder::after {
    width: 46%;
    height: 3px;
    bottom: 20%;
    left: 8%;
    top: auto;
    right: auto;
    background: var(--text);
    opacity: 0.8;
}

/* Composition 3: ring + offset baseline */
.page-card:nth-child(3n) .page-card-placeholder::before {
    background:
        radial-gradient(circle at 56% 44%,
            transparent 0 20%, var(--text) 20% 21.2%, transparent 21.2%),
        radial-gradient(circle at 56% 44%, var(--accent) 0 7%, transparent 7.5%);
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    width: 60%;
    height: 2px;
    bottom: 24%;
    left: 20%;
    top: auto;
    right: auto;
    background: var(--accent);
    transform: rotate(-2deg);
}

.page-card:hover .page-card-placeholder::before {
    transform: scale(1.06) rotate(-1.5deg);
}

.page-card:hover .page-card-placeholder::after {
    transform: translateY(-6px) rotate(3deg);
}

@media (prefers-reduced-motion: reduce) {
    .page-card-placeholder::before,
    .page-card-placeholder::after {
        transition: none !important;
    }
}

/* === KEYBOARD FOCUS (6.2.4 accessibility) === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* === HERO BACKGROUND IMAGE (6.3.3) ===
   Modern goes cinematic: full-height photo under a film-style bottom gradient. Content centered, four overlay levels. Overrides the engine's
   universal fallback (loaded earlier) by cascade order. No image set ->
   this block stays inert. */
.hero--has-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.hero--has-bg .hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero--has-bg .hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero--has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.6) 100%);
}

.hero--has-bg h1 {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 3px 24px rgba(0,0,0,0.55);
    max-width: 22ch;
}

.hero--overlay-none::after   { background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.22) 100%); }
.hero--overlay-light::after  { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%); }
.hero--overlay-medium::after { background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.6) 100%); }
.hero--overlay-strong::after { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.76) 100%); }