/* ===================================
   Responsive Design
   Mobile-First Approach
   =================================== */

/* ===================================
   Mobile Styles (320px - 767px)
   =================================== */

@media (max-width: 767px) {
  /* Header & Navigation */
  .header__container {
    padding: 0 var(--spacing-xl);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  
  .logo {
    font-family: 'South Castle', var(--font-secondary);
    font-size: var(--font-size-xl);
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) - 25px);
    display: block;
    line-height: 1.2;
  }
  
  /* Hide nav lists but keep nav container for logo positioning */
  .nav {
    display: flex;
    position: relative;
    width: 100%;
  }
  
  .nav__list {
    display: none;
  }
  
  .nav__center {
    display: flex !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-60%, -50%);
    z-index: 1000;
    width: auto;
    margin: 0;
    flex: none;
  }
  
  .mobile-nav-toggle {
    display: block;
  }
  
  .mobile-menu {
    display: none;
  }
  
  .mobile-menu.active {
    display: flex;
  }
  
  .mobile-menu__link {
    font-size: var(--font-size-xl);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  /* Slider Section */
  .slider {
    height: 80vh;
    padding: 0;
    margin-top: 0 !important;
  }
  
  /* Portfolio Styles */
  .page-header {
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    margin-top: 0;
  }
  
  .portfolio-gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Typography - Using CSS variables from fonts.css for responsive sizing */
  /* Note: All elements (h1-h6, body, p, nav, btn) inherit responsive sizes from CSS variables - no override needed */
  
  /* Grid Adjustments */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  
  /* Gallery */
  .gallery {
    grid-template-columns: 1fr;
  }
  
  /* Masonry Gallery - Mobile: Single column */
  .masonry-gallery {
    column-count: 1;
  }
  
  /* Cards */
  .card__content {
    padding: var(--spacing-lg);
  }
  
  /* Forms */
  /* Removed padding - forms are inside containers which already have padding */
  .form {
    padding: 0;
  }
  
  /* Footer */
  .footer__instagram-section {
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-md);
  }
  
  .footer__instagram-section .container,
  .footer__main .container {
    padding: 0 var(--spacing-md);
  }
  
  .footer__instagram-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    min-width: 0;
  }
  
  .footer__instagram-item {
    min-width: 0;
  }
  
  .footer__instagram-item img {
    width: 100%;
    min-width: 80px;
  }
  
  .footer__instagram-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
  }
  
  .footer__instagram-button-wrapper {
    margin-bottom: var(--spacing-sm);
  }
  
  .footer__main {
    padding: var(--spacing-md) 0;
  }
  
  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .footer__section {
    margin-bottom: var(--spacing-md);
  }
  
  .footer__section:last-child {
    margin-bottom: 0;
  }
  
  .footer__section {
    margin-bottom: var(--spacing-lg);
  }
  
  .footer__section:last-child {
    margin-bottom: 0;
  }
  
  /* Testimonial Slider */
  .testimonial {
    flex-direction: column;
    padding: var(--spacing-lg);
    /* Removed margin - testimonial is inside container which already has padding */
    margin: 0;
    justify-content: center;
  }
  
  .testimonial__image {
    width: 100%;
    max-width: 300px;
    height: 400px;
    margin: 0 auto;
    transform: none;
    align-self: auto;
  }
  
  .testimonial__content {
    text-align: center;
  }
  
  .testimonial blockquote {
    font-size: var(--font-size-xxs);
    text-align: justify;
  }
  
  .testimonial-slider__dots {
    margin-top: var(--spacing-lg);
  }
  
  /* About Images */
  .about-images {
    height: 300px;
  }
  
  .about-image {
    height: 300px;
  }
  
  .about-image--primary {
    width: 60%;
    height: 60%;
    right: 0;
  }
  
  .about-image--secondary {
    width: 60%;
    height: 60%;
    left: 0;
  }
  
  /* About Section - Mobile */
  /* Removed padding override - now uses standard container padding */
  
  .grid--2 > div:first-child:has(.about-image-single) {
    margin-bottom: var(--spacing-3xl);
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .grid--2 > div:first-child,
  .grid--2 > div:last-child {
    /* Padding now handled by container - removed individual padding */
    text-align: center;
  }
  
  .about-image-single {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    transform: none;
    display: block;
  }
  
  /* Container */
  .container {
    padding: 0 var(--spacing-md);
  }
  
  /* Section Spacing */
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  /* Ensure slider dots position is consistent */
  .slider__dots {
    bottom: var(--spacing-md);
  }
  
  /* Homepage Responsive */
  .hero-content__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--spacing-lg);
  }
  
  .hero-content__title {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.75rem, 7vw, 2.5rem); /* Mobile: 28-40px (increased) */
    padding-bottom: var(--spacing-md);
    text-align: center;
  }
  
  .hero-content__text {
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
    align-self: start;
    text-align: center;
  }
  
  .hero-content__gallery {
    grid-column: 1;
    grid-row: 3;
  }
  
  .hero-gallery__grid {
    height: 400px;
  }
  
  .home-banner__image-container {
    height: 50vh;
    min-height: 300px;
  }
  
  .home-banner__title {
    font-size: clamp(1.25rem, 5vw, 2rem);
    margin-bottom: var(--spacing-sm);
  }
  
  .home-banner__subtitle {
    font-size: clamp(0.875rem, 3vw, 1.25rem);
  }
  
  .seen-in__content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
    justify-content: center;
  }
  
  .seen-in__logos {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2xl);
    width: 100%;
  }
  
  .seen-in__logo {
    height: 50px;
    max-width: 180px;
    margin: var(--spacing-md) 0;
  }
  
  /* Experience Grid */
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Grid Layout - Mobile: ensure image comes first */
  .grid--2--reversed > div:first-child {
    order: 2;
  }
  
  .grid--2--reversed > div:last-child {
    order: 1;
  }
  
  /* Diagonal Images Layout - Mobile: hide second image */
  .grid--2--diagonal-images .diagonal-image:last-child {
    display: none;
  }
  
  .grid--2--diagonal-images .diagonal-image:first-child {
    position: relative;
    width: 100%;
    height: 450px; /* Increased by 50% from 300px */
    max-height: none; /* Remove max-height constraint for mobile */
    top: auto;
    left: auto;
  }
  
  /* Diagonal images container spacing */
  .grid--2--diagonal-images {
    min-height: 450px; /* Increased by 50% from 300px */
    margin-bottom: var(--spacing-lg);
  }
  
  /* About Page Images - Video and single images */
  .love-story-image {
    height: 600px; /* Increased size for better visibility */
    max-height: 80vh; /* Ensure it doesn't exceed viewport on mobile */
    margin-bottom: var(--spacing-lg); /* Add spacing between image/video and heading below */
  }
  
  video.love-story-image {
    height: 600px;
    max-height: 80vh;
  }
  
  /* Increase gap in grid for about page sections */
  body:has(#main-content .gallery-hero) .grid--2 {
    gap: var(--spacing-xl); /* Increase from md (18px) to xl (36px) */
  }
  
  /* Pricing */
  .pricing-card--featured {
    transform: none;
  }
  
  .pricing-image {
    height: 100px;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .service-image {
    height: 80px;
  }
  
  .addon-image {
    height: 120px;
  }
  
  .addons-grid {
    grid-template-columns: 1fr;
  }
  
  .addons-grid--2x3 {
    grid-template-columns: 1fr;
    max-width: none;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  /* Lovestories Layout - Mobile */
  .lovestories-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: auto;
  }
  
  .lovestories-info--left,
  .lovestories-info--right {
    text-align: center;
    padding: 0;
  }
  
  .lovestories-info .btn {
    font-size: var(--font-size-base);
  }
  
  /* Make images container transparent so its children become direct flex children */
  .lovestories-images {
    display: contents;
  }
  
  /* Reorder: Wedding image, Wedding button, Maternity image, Maternity button */
  .lovestories-image-link:first-child {
    order: 1;
  }
  
  .lovestories-info--left {
    order: 2;
  }
  
  .lovestories-image-link:last-child {
    order: 3;
  }
  
  .lovestories-info--right {
    order: 4;
  }
  
  .lovestories-image {
    max-height: 400px;
    width: 100%;
  }
  
  /* FAQ Responsive Styles */
  .grid--2 {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  
  /* Headline first on mobile */
  .faq-image-overlay {
    order: 0;
    position: static;
    grid-column: auto;
    grid-row: auto;
    margin: var(--spacing-lg) 0;
  }
  
  /* Override section--alt on mobile - keep same order */
  .section--alt .faq-image-overlay {
    order: 0;
    grid-column: auto;
  }
  
  /* Images second on mobile */
  .faq-image-section {
    height: auto;
    margin-bottom: var(--spacing-lg);
    order: 1;
    position: static;
    grid-column: auto;
    grid-row: auto;
  }
  
  /* Override section--alt on mobile - keep same order */
  .section--alt .faq-image-section {
    order: 1;
    grid-column: auto;
  }
  
  /* FAQ Collage - Mobile: Keep diagonal overlapping layout - optimized size */
  .faq-image-collage {
    height: 360px;
    min-height: 320px;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--spacing-md) auto;
  }
  
  .faq-image-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .faq-image-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: center;
  }
  
  .faq-image-collage__item {
    position: absolute !important;
    width: 40% !important;
    max-height: 250px !important;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    transition: transform 0.1s ease-out;
    will-change: transform;
  }
  
  .faq-image-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Top left image - centered layout, slightly lower and offset */
  .faq-image-collage__item:nth-child(1) {
    top: 5% !important;
    left: 12.5% !important;
    z-index: 3;
  }
  
  /* Top right image - centered layout, higher position, overlapping left more */
  .faq-image-collage__item:nth-child(2) {
    top: 0% !important;
    left: 47.5% !important;
    z-index: 2;
  }
  
  /* Bottom center image - centered layout, asymmetric center, overlapping both */
  .faq-image-collage__item:nth-child(3) {
    top: 40% !important;
    left: 30.5% !important;
    z-index: 4;
  }
  
  /* List third on mobile */
  .faq-content {
    order: 2;
    padding: 0;
    margin: var(--spacing-lg) 0;
    grid-column: auto;
    grid-row: auto;
  }
  
  /* Override section--alt on mobile - keep same order */
  .section--alt .faq-content {
    order: 2;
    grid-column: auto;
  }
  
  .faq-item {
    margin-bottom: 0;
  }
  
  .faq-question {
    padding: var(--spacing-md) var(--spacing-md);
  }
  
  .faq-answer {
    max-height: 0;
    padding: 0 var(--spacing-md);
    overflow: hidden;
  }
  
  .faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 1000px;
    padding: 0 var(--spacing-md) var(--spacing-lg);
  }
  
  .faq-answer p {
    margin-top: var(--spacing-sm);
  }
  
  /* Portfolio Responsive */
  .portfolio-hero {
    height: 300px;
  }
  
  .portfolio-hero-content {
    padding: var(--spacing-lg);
  }
  
  .wedding-overview-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .wedding-overview-image {
    height: 200px;
  }
  
  .wedding-overview-content {
    padding: var(--spacing-lg);
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
  
  /* Gallery Pages */
  .gallery-hero {
    height: calc(100vh * 0.7);
  }
  
  .gallery-hero-text {
    padding: var(--spacing-lg);
  }
  
  .gallery-hero-text h1 {
    font-size: var(--font-size-xl);
  }
  
  .gallery-location {
    font-size: var(--font-size-xs);
  }
  
  .gallery-description {
    font-size: var(--font-size-xs);
  }
  
  .gallery-section {
    padding: var(--spacing-2xl) 0;
  }
  
  .gallery-section .gallery-grid {
    grid-template-columns: 1fr !important;
    /* Removed padding - gallery-grid is inside container which already has padding */
    padding: 0;
  }
  
  .back-to-weddings {
    padding: var(--spacing-xl) 0;
  }
  
  .back-to-weddings .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-xs);
  }
}

/* ===================================
   Tablet Styles (768px - 1023px)
   =================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Pricing Grid - Tablet: 2 columns */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Header & Navigation */
  .header__container {
    padding: 0 var(--spacing-xl);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  
  /* Hide nav lists but keep nav container for logo positioning */
  .nav {
    display: flex;
    position: relative;
    width: 100%;
  }
  
  .nav__list {
    display: none;
  }
  
  .nav__center {
    display: flex !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: auto;
    margin: 0;
    flex: none;
  }
  
  .mobile-nav-toggle {
    display: block;
  }
  
  .mobile-menu {
    display: none;
  }
  
  .mobile-menu.active {
    display: flex;
  }
  
  .mobile-menu__link {
    font-size: var(--font-size-xl);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .mobile-menu__item {
    margin: var(--spacing-lg) 0;
  }
  
  .logo {
    font-family: 'South Castle', var(--font-secondary);
    font-size: var(--font-size-xl);
    text-align: center;
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) - 25px);
    line-height: 1.2;
  }
  
  /* Hero Content Section - Tablet */
  .hero-content__title {
    font-size: clamp(3rem, 5vw, 4rem); /* Tablet: 48-64px (increased) */
    text-align: center;
  }
  
  /* Home Banner - Tablet */
  .home-banner__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
  
  .home-banner__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }
  
  /* Slider Section */
  .slider {
    height: 85vh;
    padding: 0;
    margin-top: 0 !important;
  }
  
  /* Grid Adjustments */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Gallery */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Masonry Gallery - Tablet: 2 columns */
  .masonry-gallery {
    column-count: 2;
  }
  
  /* Typography - Using CSS variables from fonts.css for responsive sizing */
  /* Note: All elements inherit responsive sizes from CSS variables - no override needed */
  
  /* Footer */
  .footer__instagram-section .container,
  .footer__main .container {
    padding: 0 var(--spacing-md);
  }
  
  .footer__instagram-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
  }
  
  .footer__content {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }
  
  /* Portfolio Styles */
  .page-header {
    margin-top: 0;
  }
  
  .portfolio-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* About Images */
  .about-images {
    height: 350px;
  }
  
  .about-image {
    height: 350px;
  }
  
  .about-image--primary {
    width: 62%;
    height: 62%;
    right: 0;
  }
  
  .about-image--secondary {
    width: 62%;
    height: 62%;
    left: 0;
  }
  
  /* Gallery Pages */
  .gallery-hero {
    height: calc(100vh * 0.7);
  }
  
  .gallery-hero-text h1 {
    font-size: var(--font-size-2xl);
  }
  
  .gallery-hero-text {
    padding: var(--spacing-xl);
  }
  
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .addons-grid--2x3 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }
  
  /* Lovestories Layout - Tablet */
  .lovestories-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: auto;
  }
  
  .lovestories-info--left,
  .lovestories-info--right {
    text-align: center;
    padding: 0;
  }
  
  .lovestories-info .btn {
    font-size: var(--font-size-xl);
  }
  
  /* Make images container transparent so its children become direct flex children */
  .lovestories-images {
    display: contents;
  }
  
  /* Reorder: Wedding image, Wedding button, Maternity image, Maternity button */
  .lovestories-image-link:first-child {
    order: 1;
  }
  
  .lovestories-info--left {
    order: 2;
  }
  
  .lovestories-image-link:last-child {
    order: 3;
  }
  
  .lovestories-info--right {
    order: 4;
  }
  
  .lovestories-image {
    max-height: 500px;
    width: 100%;
  }
  
  /* Seen In Section - Medium Screens */
  .seen-in__content {
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
  }
  
  .seen-in__logos {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2xl);
  }
  
  .seen-in__logo {
    height: 55px;
    max-width: 200px;
  }
  
  /* FAQ Collage - Tablet: 2 up, 1 down layout - Asymmetric */
  .faq-image-collage {
    height: 500px;
    min-height: 400px;
    max-width: 700px;
  }
  
  .faq-image-collage__item {
    width: 47%;
    max-width: 320px;
    max-height: 420px;
    aspect-ratio: 2 / 3;
  }
  
  .faq-image-collage__item:nth-child(1) {
    top: 6%;
    left: 2%;
    z-index: 3;
  }
  
  .faq-image-collage__item:nth-child(2) {
    top: -1%;
    left: 48%;
    z-index: 2;
  }
  
  .faq-image-collage__item:nth-child(3) {
    top: 40%;
    left: 24%;
    z-index: 4;
  }
  
  /* Ensure slider dots position matches mobile and desktop */
  .slider__dots {
    bottom: var(--spacing-md);
  }
}

/* ===================================
   Desktop Styles (1024px+)
   =================================== */

@media (min-width: 1024px) {
  /* Pricing Grid - Desktop: 3 columns */
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Navigation */
  .nav {
    display: flex;
  }
  
  .nav__list {
    display: flex;
    gap: var(--spacing-lg);
  }
  
  .nav__link {
    font-size: var(--font-size-base);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .mobile-nav-toggle {
    display: none !important;
  }
  
  /* Grid Adjustments */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Gallery */
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Masonry Gallery - Desktop: 3 columns */
  .masonry-gallery {
    column-count: 3;
  }
  
  /* Typography - Using CSS variables from fonts.css for responsive sizing */
  /* Note: All elements inherit responsive sizes from CSS variables - no override needed */
  
  /* Footer - Desktop already uses 3 columns, no change needed */
  
  /* Portfolio Styles */
  .portfolio-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Lovestories Layout - Desktop */
  .lovestories-layout {
    grid-template-columns: 0.7fr 4fr 0.7fr;
    gap: var(--spacing-xl);
  }
  
  .lovestories-info--left {
    text-align: right;
    padding-right: 0;
  }
  
  .lovestories-info--right {
    text-align: left;
    padding-left: 0;
  }
  
  .lovestories-images {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
  
  /* Ensure slider dots position matches mobile */
  .slider__dots {
    bottom: var(--spacing-md);
  }
}

/* ===================================
   Large Desktop Styles (1200px+)
   =================================== */

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-max-width);
  }
  
  /* Gallery */
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Masonry Gallery - Large Desktop: Keep 3 columns (same as desktop) */
  .masonry-gallery {
    column-count: 3;
  }
}

/* ===================================
   Extra Large Desktop Styles (1400px+)
   =================================== */

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

/* ===================================
   Landscape Mobile Styles
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .slider {
    height: 100vh;
  }
}

/* ===================================
   High DPI Displays
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure images are crisp on high DPI displays */
  .gallery__image,
  .card__image,
  .slider__image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ===================================
   Reduced Motion Preferences
   =================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .gallery__image:hover {
    transform: none;
  }
  
  .card:hover {
    transform: none;
  }
  
  /* Disable hover transform on mobile - already handled by @media (hover: hover) */
  @media (hover: hover) {
    .btn:hover {
      transform: none;
    }
  }
  
  /* Fix mobile tap delay for anchor buttons - removes 300ms delay */
  .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* ===================================
   Print Styles
   =================================== */

@media print {
  .header,
  .footer,
  .btn,
  .mobile-nav-toggle {
    display: none !important;
  }
  
  .slider {
    height: auto;
    min-height: 300px;
  }
  
  .section {
    padding: 1em 0;
    page-break-inside: avoid;
  }
  
  .card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
}