/* Responsive Styles — MYPARIS */

/* Page templates common */
.page-hero { padding:var(--space-12) 0 var(--space-8); background:var(--color-bg-alt); margin-bottom:var(--space-4); }
.page-hero__title { font-family:var(--font-display); font-size:var(--text-4xl); }
.page-hero__label { font-size:var(--text-xs); letter-spacing:var(--tracking-widest); color:var(--color-accent); margin-bottom:var(--space-2); }
.page-hero__desc { font-size:var(--text-md); color:var(--color-text-light); margin-top:var(--space-3); max-width:500px; margin-left:auto; margin-right:auto; }

/* Post cards */
.post-card__image { display:block; overflow:hidden; margin-bottom:var(--space-4); }
.post-card__image img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--duration-slow); }
.post-card:hover .post-card__image img { transform:scale(1.03); }
.post-card__date { font-size:var(--text-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.post-card__title { font-family:var(--font-display); font-size:var(--text-xl); margin:var(--space-2) 0 var(--space-3); }
.post-card__title a { text-decoration:none; }
.post-card__excerpt { font-size:var(--text-sm); color:var(--color-text-light); margin-bottom:var(--space-3); }

/* Single post */
.single-post__header { padding:var(--space-12) 0 var(--space-8); }
.single-post__title { font-size:var(--text-4xl); max-width:800px; margin:0 auto; }
.single-post__meta { display:flex; justify-content:center; gap:var(--space-4); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--color-text-muted); margin-bottom:var(--space-4); }
.single-post__featured { max-width:1000px; margin:0 auto var(--space-8); }
.single-post__featured img { width:100%; }
.single-post__share { display:flex; align-items:center; gap:var(--space-4); padding-top:var(--space-8); border-top:1px solid var(--color-border); margin-top:var(--space-8); }
.single-post__share a { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.post-navigation { display:flex; justify-content:space-between; padding-top:var(--space-6); border-top:1px solid var(--color-border); }
.post-navigation a { font-size:var(--text-sm); }

/* Entry content */
.entry-content p { margin-bottom:var(--space-5); line-height:var(--leading-relaxed); }
.entry-content h2, .entry-content h3 { margin:var(--space-8) 0 var(--space-4); }
.entry-content img { max-width:100%; height:auto; margin:var(--space-6) 0; }
.entry-content ul, .entry-content ol { margin:var(--space-4) 0; padding-left:var(--space-6); }
.entry-content li { margin-bottom:var(--space-2); list-style:disc; }
.entry-content blockquote { border-left:3px solid var(--color-accent); padding-left:var(--space-6); margin:var(--space-6) 0; font-style:italic; color:var(--color-text-light); }

/* Newsletter */
.newsletter-section { background:var(--color-bg-dark); color:var(--color-secondary); padding:var(--space-12) 0; }
.newsletter-section__title { font-family:var(--font-display); font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.newsletter-section__text { font-size:var(--text-md); opacity:0.7; margin-bottom:var(--space-8); }
.newsletter-form__field { display:flex; max-width:500px; margin:0 auto; }
.newsletter-form__input { flex:1; padding:14px 20px; background:transparent; border:1px solid rgba(255,255,255,0.3); color:var(--color-secondary); font-size:var(--text-md); }
.newsletter-form__input::placeholder { color:rgba(255,255,255,0.4); }
.newsletter-form__btn { padding:14px 20px; background:var(--color-accent); border:1px solid var(--color-accent); color:var(--color-secondary); }
.newsletter-form__btn:hover { background:var(--color-accent-dark); }
.newsletter-form__message { font-size:var(--text-sm); margin-top:var(--space-3); }

/* Footer */
.site-footer { background:var(--color-primary); color:var(--color-secondary); padding:var(--space-12) 0 var(--space-6); }
.footer-top { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-12); margin-bottom:var(--space-10); }
.footer-logo .site-logo__text { color:var(--color-secondary); font-size:1.5rem; }
.footer-tagline { font-size:var(--text-sm); opacity:0.6; margin-top:var(--space-2); }
.footer-social { display:flex; gap:var(--space-4); margin-top:var(--space-5); }
.footer-social__link { color:var(--color-secondary); opacity:0.6; transition:opacity var(--duration-fast); }
.footer-social__link:hover { opacity:1; }
.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.footer-col__title { font-size:var(--text-xs); letter-spacing:var(--tracking-widest); margin-bottom:var(--space-5); font-weight:var(--weight-semibold); }
.footer-col__list li { margin-bottom:var(--space-3); }
.footer-col__list a { font-size:var(--text-sm); opacity:0.6; transition:opacity var(--duration-fast); }
.footer-col__list a:hover { opacity:1; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,0.1); }
.footer-bottom p { font-size:var(--text-xs); opacity:0.5; margin:0; }
.footer-lang { display:flex; gap:var(--space-3); font-size:var(--text-xs); }
.footer-lang__item { opacity:0.5; }
.footer-lang__item.is-active { opacity:1; }
.footer-payments { display:flex; gap:var(--space-3); }
.footer-payment { font-size:10px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); padding:4px 8px; border:1px solid rgba(255,255,255,0.2); opacity:0.5; }

/* About page */
.about-hero { position:relative; min-height:450px; display:flex; align-items:center; justify-content:center; background:var(--color-bg-dark); }
.about-hero__overlay { position:absolute; inset:0; background:linear-gradient(135deg,#0a0a0a,#1a1212,#0a0a0a); }
.about-hero .container { position:relative; z-index:1; color:var(--color-secondary); }
.about-hero__label { font-size:var(--text-xs); letter-spacing:var(--tracking-widest); color:var(--color-accent); margin-bottom:var(--space-3); }
.about-hero__title { font-family:var(--font-display); font-size:var(--text-6xl); margin-bottom:var(--space-4); }
.about-hero__subtitle { font-size:var(--text-lg); opacity:0.8; }
.about-story__title { font-family:var(--font-display); font-size:var(--text-3xl); margin-bottom:var(--space-6); }
.about-story__text p { font-size:var(--text-md); line-height:var(--leading-relaxed); color:var(--color-text-light); }
.value-card__icon { font-size:var(--text-2xl); color:var(--color-accent); margin-bottom:var(--space-4); }
.value-card__title { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:var(--space-3); }
.value-card__text { font-size:var(--text-sm); color:var(--color-text-light); line-height:var(--leading-relaxed); }

/* 404 */
.error-404 { padding:var(--space-14) 0; }
.error-404__code { font-family:var(--font-display); font-size:8rem; line-height:1; color:var(--color-border); }
.error-404__title { font-family:var(--font-display); font-size:var(--text-3xl); margin:var(--space-4) 0; }
.error-404__text { color:var(--color-text-light); margin-bottom:var(--space-8); }
.error-404__actions { display:flex; gap:var(--space-4); justify-content:center; }

/* Editorial grid */
.editorial-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.editorial-card--large { grid-row:1/3; }
.editorial-card__link { display:block; position:relative; overflow:hidden; }
.editorial-card__image { overflow:hidden; }
.editorial-card__image img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--duration-slow); }
.editorial-card--large .editorial-card__image img { aspect-ratio:2/3; }
.editorial-card:hover .editorial-card__image img { transform:scale(1.03); }
.editorial-card__content { padding:var(--space-4) 0; }
.editorial-card__cat { font-size:var(--text-xs); letter-spacing:var(--tracking-widest); color:var(--color-accent); }
.editorial-card__title { font-family:var(--font-display); font-size:var(--text-xl); margin:var(--space-2) 0 var(--space-3); }
.editorial-card__read { font-size:var(--text-xs); letter-spacing:var(--tracking-widest); }

/* Lookbook grid */
.lookbook-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.lookbook-item--wide { grid-column:span 2; }
.lookbook-item__link { display:block; position:relative; overflow:hidden; }
.lookbook-item__link img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform var(--duration-slow); }
.lookbook-item:hover img { transform:scale(1.03); }
.lookbook-item__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--color-secondary); opacity:0; transition:opacity var(--duration-normal); }
.lookbook-item:hover .lookbook-item__overlay { opacity:1; }
.lookbook-item__title { font-family:var(--font-display); font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.lookbook-item__placeholder { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); }

/* Store cards */
.store-card { padding:var(--space-8); border:1px solid var(--color-border); }
.store-card__name { font-size:var(--text-sm); letter-spacing:var(--tracking-widest); margin-bottom:var(--space-4); }
.store-card__address, .store-card__phone, .store-card__hours { font-size:var(--text-md); color:var(--color-text-light); margin-bottom:var(--space-3); }

/* Pagination */
.pagination { text-align:center; }
.pagination .nav-links { display:inline-flex; gap:var(--space-2); }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 var(--space-3); border:1px solid var(--color-border); font-size:var(--text-sm); transition:all var(--duration-fast); }
.pagination .current, .pagination a:hover { background:var(--color-primary); color:var(--color-secondary); border-color:var(--color-primary); }

/* Story cards */
.story-card__link { display:block; text-decoration:none; }
.story-card__image { overflow:hidden; margin-bottom:var(--space-4); }
.story-card__image img { width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform var(--duration-slow); }
.story-card:hover img { transform:scale(1.03); }
.story-card__placeholder { width:100%; aspect-ratio:3/2; background:linear-gradient(135deg,#1a1a1a,#2a2a2a); }
.story-card__content time { font-size:var(--text-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.story-card__title { font-family:var(--font-display); font-size:var(--text-xl); margin:var(--space-2) 0 var(--space-3); }
.story-card__excerpt { font-size:var(--text-sm); color:var(--color-text-light); margin-bottom:var(--space-3); }

/* Contact */
.contact-info__item { margin-bottom:var(--space-8); }
.contact-info__item p { font-size:var(--text-md); color:var(--color-text-light); }

/* Related products */
.related-products { background:var(--color-bg-alt); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 1200px) {
    .hero-slide__title { font-size: var(--text-5xl); }
    .products-grid.grid-4, ul.products { grid-template-columns: repeat(3, 1fr); }
    .single-product-layout { gap: var(--space-8); }
}

@media (max-width: 992px) {
    .hamburger { display: flex; }
    .primary-nav { display: none; }
    .hero-slide__title { font-size: var(--text-4xl); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .category-card:nth-child(1) { grid-row: auto; }
    .category-card:nth-child(1) .category-card__image { padding-bottom: 125%; }
    .single-product-layout { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .editorial-grid { grid-template-columns: 1fr; }
    .editorial-card--large { grid-row: auto; }
    .lookbook-grid { grid-template-columns: repeat(2, 1fr); }
    .lookbook-item--wide { grid-column: auto; }
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position:fixed; inset:0; z-index:var(--z-modal); background:var(--color-secondary); transform:translateX(-100%); transition:transform var(--duration-slow); padding:var(--space-6); overflow-y:auto; }
    .shop-sidebar.is-open { transform:translateX(0); }
    .shop-sidebar__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-6); }
    .shop-filter-toggle { display: inline-flex; }
}

@media (max-width: 768px) {
    :root { --header-height: 60px; --container-padding: 16px; }
    .hero-slider { min-height: 500px; }
    .hero-slide__title { font-size: var(--text-3xl); }
    .hero-slide__subtitle { font-size: var(--text-xs); }
    .products-grid.grid-4, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    .grid-3, .posts-grid.grid-3, .stories-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .section-header__title { font-size: var(--text-3xl); }
    .page-hero__title { font-size: var(--text-3xl); }
    .about-hero__title { font-size: var(--text-4xl); }
    .footer-columns { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .stores-grid { grid-template-columns: 1fr !important; }
    .values-grid { grid-template-columns: 1fr !important; }
    .quick-view-modal__body { grid-template-columns: 1fr; }
    .category-hero { height: 250px; }
    .category-hero__title { font-size: var(--text-3xl); }
    .error-404__code { font-size: 5rem; }
}

@media (max-width: 576px) {
    .hero-slide__title { font-size: var(--text-2xl); }
    .hero-slider { min-height: 400px; }
    .category-grid { grid-template-columns: 1fr; }
    .site-header__inner { padding: 0 var(--space-4); }
    .site-header__right { gap: var(--space-3); }
    .grid-3, .posts-grid.grid-3, .stories-grid { grid-template-columns: 1fr !important; }
    .newsletter-form__field { flex-direction: column; }
    .newsletter-form__input { width: 100%; }
    .error-404__actions { flex-direction: column; }
    .btn--lg { padding: 14px 32px; }
}
