/*
 * Hanabi Theme - Responsive CSS
 * Breakpoints:
 *   --bp-xl:   1280px  (large PC)
 *   --bp-lg:   1024px  (laptop / small desktop)
 *   --bp-md:    768px  (tablet)
 *   --bp-sm:    600px  (large SP)
 *   --bp-xs:    390px  (small SP / iPhone SE)
 */

/* =============================================
   Large PC (1280px+)
   Wide padding, larger typography
   ============================================= */
@media (min-width: 1280px) {
    .hero-title {
        font-size: 3.8rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .post-card-title {
        font-size: 1.05rem;
    }

    .posts-grid.featured .post-card:first-child .post-card-title {
        font-size: 1.5rem;
    }

    .entry-content {
        font-size: 1.05rem;
    }
}

/* =============================================
   Laptop / Small Desktop  (max 1024px)
   ============================================= */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 280px;
    }

    .footer-main {
        grid-template-columns: 1.8fr 1fr 1fr;
    }

    .footer-main > .footer-col:last-child {
        grid-column: 1 / -1;
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
    }

    .footer-main > .footer-col:last-child .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
    }
}

/* =============================================
   Tablet  (max 768px)
   ============================================= */
@media (max-width: 768px) {

    .container {
        padding: 0 32px;
    }

    /* Layout */
    .content-area {
        grid-template-columns: 1fr;
        padding: 32px 0;
        gap: 40px;
    }

    /* Hero: single column */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hero-visual {
        display: none;
    }

    .hero-section {
        min-height: clamp(480px, 65vh, 680px);
    }

    .hero-title {
        font-size: clamp(1.8rem, 5vw, 2.6rem);
    }

    .hero-description {
        font-size: 0.95rem;
    }

    /* Posts grid */
    .posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }

    .posts-grid.featured {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .posts-grid.featured .post-card:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-main > .footer-brand {
        grid-column: span 2;
    }

    /* Post navigation */
    .post-navigation {
        grid-template-columns: 1fr;
    }

    .post-nav-item.next {
        text-align: left;
    }

    /* Section title */
    .section-title {
        font-size: 1.25rem;
    }
}

/* =============================================
   SP / Smartphone  (max 600px)
   ============================================= */
@media (max-width: 600px) {

    /* Base */
    html {
        font-size: 15px;
    }

    /* Container: tight side padding */
    .container {
        padding: 0 16px;
    }

    /* Header */
    .site-header {
        position: sticky;
    }

    .header-inner {
        height: 60px;
    }

    /* Lang switcher: compact on SP */
    .lang-btn {
        padding: 3px 7px;
        font-size: 0.7rem;
    }

    .site-logo {
        font-size: 1.3rem;
    }

    .site-title {
        font-size: 1.15rem;
    }

    .site-tagline {
        display: none;
    }

    /* Mobile nav */
    .menu-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .primary-nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--color-bg-secondary);
        border-bottom: 1px solid var(--color-border);
        padding: 8px 16px 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    .primary-nav.is-open {
        display: block;
    }

    .primary-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .primary-nav ul li a {
        padding: 14px 8px;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
    }

    .primary-nav ul li:last-child a {
        border-bottom: none;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        align-items: center;
        padding: 64px 0 48px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        display: none;
    }

    .hero-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    .hero-title {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .hero-description {
        font-size: 0.9rem;
        line-height: 1.8;
        margin-bottom: 24px;
    }

    .hero-description br {
        display: none;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    /* Buttons */
    .btn {
        padding: 12px 20px;
    }

    /* Section header */
    .section-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Posts grid: single column on small SP */
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .posts-grid.featured {
        grid-template-columns: 1fr;
    }

    .posts-grid.featured .post-card:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    /* Post card */
    .post-card-body {
        padding: 16px;
    }

    .post-card-title {
        font-size: 0.95rem;
    }

    .post-card-meta {
        font-size: 0.75rem;
        gap: 8px;
    }

    /* Single post */
    .post-title {
        font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    }

    .post-header {
        margin-bottom: 28px;
        padding-bottom: 20px;
    }

    .post-header-meta {
        gap: 10px;
        flex-wrap: wrap;
    }

    .post-thumbnail {
        margin-bottom: 28px;
        border-radius: var(--radius-md);
    }

    /* Entry content */
    .entry-content {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .entry-content h2 {
        font-size: 1.15rem;
        padding: 10px 12px;
    }

    .entry-content h3 {
        font-size: 1.05rem;
    }

    .entry-content blockquote {
        padding: 14px 16px;
    }

    .entry-content table {
        font-size: 0.8rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Post navigation */
    .post-navigation {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 32px;
    }

    .post-nav-item.next {
        text-align: left;
    }

    /* Post footer */
    .post-footer {
        margin-top: 32px;
        padding-top: 24px;
    }

    /* Event cards */
    .event-card {
        padding: 16px;
        gap: 14px;
    }

    .event-date-badge {
        width: 52px;
    }

    .event-date-badge .day {
        font-size: 1.5rem;
    }

    /* Sidebar: displayed below content on SP */
    .sidebar {
        gap: 20px;
    }

    .widget {
        padding: 18px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.75rem;
        padding: 12px 0;
    }

    /* Pagination */
    .pagination {
        gap: 6px;
        margin-top: 32px;
    }

    .page-numbers {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    /* Search form */
    .search-form {
        flex-direction: row;
    }

    .search-form input[type="search"] {
        font-size: 16px; /* prevent iOS zoom */
    }

    /* 404 */
    .error-page {
        padding: 48px 16px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 40px 0 24px;
    }

    .footer-main > .footer-brand {
        grid-column: auto;
    }

    .footer-brand .site-title {
        font-size: 1.2rem;
    }

    .footer-description {
        font-size: 0.85rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px 0;
    }

    .footer-bottom-links {
        gap: 16px;
    }

    /* Share buttons */
    .share-buttons {
        flex-wrap: wrap;
    }
}

/* =============================================
   Extra Small SP  (max 390px / iPhone SE etc.)
   ============================================= */
@media (max-width: 390px) {

    html {
        font-size: 14px;
    }

    .container {
        padding: 0 14px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-actions .btn {
        padding: 13px 16px;
        font-size: 0.9rem;
    }

    .post-card-body {
        padding: 14px;
    }

    .entry-content h2 {
        font-size: 1.05rem;
    }

    .event-date-badge {
        width: 46px;
    }

    .event-date-badge .day {
        font-size: 1.3rem;
    }
}

/* =============================================
   Touch device adjustments
   ============================================= */
@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    .primary-nav ul li a {
        padding: 14px 12px;
    }

    .post-card:hover {
        transform: none;
    }

    .btn-primary:hover {
        transform: none;
    }

    /* Disable hover-only animations */
    .post-card:hover .post-card-thumbnail img {
        transform: none;
    }
}

/* =============================================
   Print
   ============================================= */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .post-navigation,
    .hero-section,
    .menu-toggle,
    .fireworks-canvas {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .content-area {
        grid-template-columns: 1fr;
    }

    .entry-content a {
        color: #000;
        text-decoration: underline;
    }

    .entry-content a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #555;
    }
}