/**
 * Responsive Styles
 *
 * Media queries and responsive adjustments for all screen sizes
 */

/* ========================================
   LARGE SCREENS (1400px+)
   ======================================== */
@media (min-width: 1400px) {
	:root {
		--container-padding: 40px;
	}

	.bp-section {
		padding: var(--space-4xl) var(--container-padding);
	}

	.bp-section-lg {
		padding: 160px var(--container-padding);
	}
}

/* ========================================
   DESKTOP (1024px - 1399px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1399px) {
	/* Standard desktop styles - most are already defined in other files */
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Adjust grid columns */
	.bp-grid-3,
	.bp-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Content sidebar to single column */
	.content-sidebar-wrap {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: static;
		margin-top: var(--space-2xl);
	}

	/* Reduce section spacing */
	.bp-section {
		padding: var(--space-2xl) var(--container-padding);
	}

	.bp-section-lg {
		padding: var(--space-3xl) var(--container-padding);
	}

	/* Footer grid */
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Pet avatars */
	.bp-pet-avatar {
		width: 180px;
		height: 180px;
	}
}

/* ========================================
   MOBILE (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
	/* Typography adjustments */
	body {
		font-size: 16px;
	}

	:root {
		--container-padding: 16px;
		--text-body: 16px;
	}

	/* Section spacing */
	.bp-section {
		padding: var(--space-2xl) var(--container-padding);
	}

	.bp-section-sm {
		padding: var(--space-xl) var(--container-padding);
	}

	.bp-section-lg {
		padding: var(--space-3xl) var(--container-padding);
	}

	/* Headings */
	.bp-section-heading {
		margin-bottom: var(--space-xl);
	}

	.bp-section-heading::after {
		width: 60px;
		height: 3px;
		margin-top: var(--space-md);
	}

	/* All grids to single column */
	.bp-grid-2,
	.bp-grid-3,
	.bp-grid-4,
	.bp-grid-cols-2,
	.bp-grid-cols-3 {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* Header adjustments */
	.site-header {
		padding: var(--space-sm) 0;
	}

	.site-logo {
		font-size: var(--text-h5);
	}

	.site-logo img {
		max-height: 50px;
	}

	/* Mobile navigation */
	.primary-nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 280px;
		height: 100vh;
		background: var(--color-white);
		flex-direction: column;
		align-items: flex-start;
		padding: var(--space-3xl) var(--space-lg);
		box-shadow: var(--shadow-lg);
		transition: right var(--transition-speed) var(--transition-easing);
		z-index: var(--z-modal);
		overflow-y: auto;
	}

	.primary-nav.active {
		right: 0;
	}

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

	.primary-nav li {
		width: 100%;
		border-bottom: 1px solid var(--color-cream);
	}

	.primary-nav a {
		display: block;
		width: 100%;
		padding: var(--space-md) 0;
		font-size: var(--text-body-lg);
	}

	.mobile-menu-toggle {
		display: block;
	}

	/* Overlay when menu is open */
	body.menu-open::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: calc(var(--z-modal) - 1);
	}

	/* Hero section */
	.bp-hero-section {
		padding: var(--space-3xl) var(--container-padding);
	}

	.bp-hero-text {
		margin-bottom: var(--space-lg);
	}

	.bp-hero-ctas {
		flex-direction: column;
		width: 100%;
	}

	.bp-hero-ctas .bp-btn {
		width: 100%;
	}

	/* Pet cards */
	.bp-pet-card {
		padding: var(--space-lg);
	}

	.bp-pet-avatar {
		width: 150px;
		height: 150px;
		margin-bottom: var(--space-md);
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.footer-nav {
		flex-direction: column;
		align-items: center;
		gap: var(--space-sm);
	}

	.footer-bottom {
		font-size: var(--text-xs);
	}

	/* Forms */
	.newsletter-form .bp-flex {
		flex-direction: column;
	}

	.newsletter-form input[type="email"] {
		width: 100%;
	}

	.newsletter-form .bp-btn {
		width: 100%;
	}

	.search-form {
		flex-direction: column;
	}

	.search-field {
		width: 100%;
	}

	.search-submit {
		width: 100%;
	}

	/* Blog posts */
	.bp-posts-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.bp-post-content {
		padding: var(--space-md);
	}

	/* Single post */
	.bp-single-hero {
		min-height: 300px;
	}

	.bp-hero-content {
		padding: var(--space-xl) var(--container-padding);
	}

	.entry-meta {
		font-size: var(--text-xs);
		flex-wrap: wrap;
	}

	/* Gallery */
	.bp-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
		gap: var(--space-sm);
	}

	.bp-gallery-item:nth-child(7n + 1) {
		grid-row: span 1;
	}

	.bp-gallery-filters {
		gap: var(--space-xs);
	}

	.bp-gallery-filter {
		padding: 8px 16px;
		font-size: var(--text-sm);
		min-height: 40px;
	}

	/* Pagination */
	.pagination {
		gap: 4px;
	}

	.pagination a,
	.pagination span {
		min-width: 40px;
		min-height: 40px;
		padding: 8px;
		font-size: var(--text-sm);
	}

	/* Social share */
	.bp-social-share {
		justify-content: flex-start;
	}

	.bp-share-text {
		display: none;
	}

	.bp-share-btn {
		width: 44px;
		height: 44px;
		justify-content: center;
		padding: var(--space-sm);
	}

	/* Buttons */
	.bp-btn {
		padding: var(--space-sm) var(--space-lg);
	}

	/* Comments */
	.comment-author {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ========================================
   SMALL MOBILE (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
	:root {
		--container-padding: 12px;
	}

	/* Typography */
	.bp-heading-hero {
		font-size: 32px;
	}

	.bp-section-heading {
		font-size: var(--text-h3);
	}

	/* Section spacing */
	.bp-section {
		padding: var(--space-xl) var(--container-padding);
	}

	.bp-section-lg {
		padding: var(--space-2xl) var(--container-padding);
	}

	/* Header */
	.site-header-inner {
		padding: 0 var(--space-sm);
	}

	.site-logo {
		font-size: var(--text-body-lg);
	}

	.site-logo img {
		max-height: 40px;
	}

	/* Mobile menu narrower */
	.primary-nav {
		width: 250px;
	}

	/* Hero */
	.bp-hero-section {
		padding: var(--space-2xl) var(--container-padding);
	}

	.bp-hero-decoration {
		font-size: 60px;
	}

	/* Pet cards */
	.bp-pet-card {
		padding: var(--space-md);
	}

	.bp-pet-avatar {
		width: 120px;
		height: 120px;
	}

	.bp-pet-name {
		font-size: var(--text-h4);
	}

	.bp-pet-traits .bp-badge {
		font-size: var(--text-xs);
		padding: 4px 12px;
	}

	/* Gallery - single column on very small screens */
	.bp-gallery-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
	}

	/* Post cards */
	.bp-post-card {
		border-radius: var(--radius-sm);
	}

	.bp-post-content {
		padding: var(--space-sm);
	}

	.bp-post-title {
		font-size: var(--text-body-lg);
		margin-bottom: var(--space-sm);
	}

	.bp-post-excerpt {
		font-size: var(--text-sm);
		margin-bottom: var(--space-md);
	}

	/* Buttons */
	.bp-btn {
		padding: 10px var(--space-md);
		font-size: var(--text-sm);
	}

	/* Footer */
	.site-footer {
		padding: var(--space-2xl) 0 var(--space-md);
	}

	.footer-bottom {
		padding-top: var(--space-md);
	}

	.copyright {
		font-size: 12px;
		line-height: 1.6;
	}

	/* Social links */
	.social-links {
		gap: var(--space-sm);
	}

	.social-link {
		width: 44px;
		height: 44px;
		font-size: 20px;
	}

	/* Lightbox */
	.bp-lightbox-image {
		max-width: 95vw;
		max-height: 60vh;
	}

	.bp-lightbox-close,
	.bp-lightbox-prev,
	.bp-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
}

/* ========================================
   EXTRA SMALL MOBILE (max-width: 375px)
   ======================================== */
@media (max-width: 375px) {
	.bp-heading-hero {
		font-size: 28px;
	}

	.bp-gallery-grid {
		grid-auto-rows: 180px;
	}

	.bp-pet-avatar {
		width: 100px;
		height: 100px;
	}
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
	/* Hide non-essential elements */
	.site-header,
	.site-footer,
	.bp-gallery-filters,
	.bp-social-share,
	.pagination,
	.newsletter-form,
	.comment-form,
	.mobile-menu-toggle {
		display: none !important;
	}

	/* Ensure content is visible */
	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	/* Remove shadows and effects */
	* {
		box-shadow: none !important;
		text-shadow: none !important;
	}

	/* Page breaks */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}

	img, figure {
		page-break-inside: avoid;
	}

	/* Links */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
	:root {
		--color-charcoal: #000;
		--color-gray: #333;
		--color-white: #fff;
	}

	.bp-btn-outline {
		border-width: 3px;
	}

	a:focus-visible,
	button:focus-visible {
		outline-width: 4px;
	}
}