/* Featured Tiles Styles */
.featured-tiles-block {
  width: 100%;
}

/* Responsive utility classes for video display - scoped to our blocks */
.featured-tiles-block .d-none,
.featured-collections-block .d-none,
.petal-pup-hero-block .d-none {
  display: none !important;
}

.featured-tiles-block .d-block,
.featured-collections-block .d-block,
.petal-pup-hero-block .d-block {
  display: block !important;
}

@media (min-width: 768px) {
  .featured-tiles-block .d-md-none,
  .featured-collections-block .d-md-none,
  .petal-pup-hero-block .d-md-none {
    display: none !important;
  }

  .featured-tiles-block .d-md-block,
  .featured-collections-block .d-md-block,
  .petal-pup-hero-block .d-md-block {
    display: block !important;
  }
}

/* ========================================
   SKELETON LOADING & ASPECT RATIO CONTAINERS
   Prevents layout shift by reserving space for images
   ======================================== */

/* Skeleton loading animation - gentle pulse */
@keyframes featured-media-skeleton-pulse {
  0%, 100% {
    background-color: #f0f0f0;
  }
  50% {
    background-color: #e4e4e4;
  }
}

/* Skeleton container - provides aspect ratio and loading background */
.featured-media__skeleton-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f0f0f0;
  /* Use CSS custom property for aspect ratio, with fallback */
  aspect-ratio: var(--aspect-ratio, 16/9);
}

/* Mobile aspect ratio override */
@media (max-width: 749px) {
  .featured-media__skeleton-container {
    aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio, 16/9));
  }
}

/* Skeleton loading state - applied before image loads */
.featured-media__skeleton-container:not(.featured-media--loaded) {
  animation: featured-media-skeleton-pulse 1.5s ease-in-out infinite;
}

/* Container is marked loaded when JS detects image loaded */
.featured-media__skeleton-container.featured-media--loaded {
  background: transparent;
  animation: none;
}

/* Image within skeleton container */
.featured-media__skeleton-container .featured-media__image,
.featured-media__skeleton-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Smooth fade-in when image loads */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Mobile: use cover since mobile images are already properly sized */
@media (max-width: 749px) {
  .featured-media__skeleton-container .featured-media__image,
  .featured-media__skeleton-container img {
    object-fit: cover;
  }
}

/* Show image when loaded */
.featured-media__skeleton-container.featured-media--loaded .featured-media__image,
.featured-media__skeleton-container.featured-media--loaded img,
.featured-media__skeleton-container img.featured-media--image-loaded {
  opacity: 1;
}

/* Picture element needs to fill container */
.featured-media__skeleton-container picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Video within skeleton container */
.featured-media__skeleton-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   END SKELETON LOADING
   ======================================== */

/* Featured media container styles */
.featured-media__container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.featured-media__container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-media__container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-media__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive image styles */
.responsive-image__wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.responsive-image__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   COMMON UTILITY CLASSES
   Scoped to theme extension blocks to avoid conflicts
   ======================================== */

/* Layout - scoped to our blocks */
.featured-tiles-block .container,
.featured-collections-block .container { width: 100%; }

.featured-tiles-block .row,
.featured-collections-block .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }

.featured-tiles-block .col-6,
.featured-collections-block .col-6 { width: 50%; padding: 0 15px; }

.featured-tiles-block .col-12,
.featured-collections-block .col-12 { width: 100%; padding: 0 15px; }

.featured-tiles-block .col-md-3,
.featured-collections-block .col-md-3 { width: 50%; padding: 0 15px; }

.featured-tiles-block .col-md-6,
.featured-collections-block .col-md-6 { width: 100%; padding: 0 15px; }

@media (min-width: 768px) {
  .featured-tiles-block .col-md-3,
  .featured-collections-block .col-md-3 { width: 25%; }
  .featured-tiles-block .col-md-6,
  .featured-collections-block .col-md-6 { width: 50%; }
}

/* Spacing - scoped to our blocks */
.featured-tiles-block .px-0,
.featured-collections-block .px-0 { padding-left: 0; padding-right: 0; }

.featured-tiles-block .px-2,
.featured-collections-block .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

.featured-tiles-block .p-3,
.featured-collections-block .p-3,
.petal-pup-hero-block .p-3 { padding: 1rem; }

.featured-tiles-block .pt-1,
.featured-collections-block .pt-1 { padding-top: 0.25rem; }

.featured-tiles-block .pt-4,
.featured-collections-block .pt-4 { padding-top: 1.5rem; }

.featured-tiles-block .pb-0,
.featured-collections-block .pb-0 { padding-bottom: 0; }

.featured-tiles-block .mb-0,
.featured-collections-block .mb-0 { margin-bottom: 0; }

.featured-tiles-block .mb-2,
.featured-collections-block .mb-2,
.petal-pup-hero-block .mb-2 { margin-bottom: 0.5rem; }

.featured-tiles-block .mb-4,
.featured-collections-block .mb-4 { margin-bottom: 1.5rem; }

.petal-pup-hero-block .mb-md-4 { margin-bottom: 1.5rem; }

.featured-tiles-block .mb-5,
.featured-collections-block .mb-5 { margin-bottom: 3rem; }

.featured-tiles-block .mx-0,
.featured-collections-block .mx-0 { margin-left: 0; margin-right: 0; }

@media (min-width: 768px) {
  .featured-tiles-block .px-md-4,
  .featured-collections-block .px-md-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .featured-tiles-block .p-md-4,
  .featured-collections-block .p-md-4,
  .petal-pup-hero-block .p-md-4 { padding: 1.5rem; }
  .featured-tiles-block .pt-md-0,
  .featured-collections-block .pt-md-0 { padding-top: 0; }
  .featured-tiles-block .pb-md-0,
  .featured-collections-block .pb-md-0 { padding-bottom: 0; }
  .featured-tiles-block .py-md-3,
  .featured-collections-block .py-md-3,
  .petal-pup-hero-block .py-md-3 { padding-top: 1rem; padding-bottom: 1rem; }
  .featured-tiles-block .mb-md-3,
  .featured-collections-block .mb-md-3 { margin-bottom: 1rem; }
  .petal-pup-hero-block .mb-md-4 { margin-bottom: 2rem; }
}

/* Display & Positioning - scoped to our blocks */
.featured-tiles-block .d-flex,
.featured-collections-block .d-flex,
.petal-pup-hero-block .d-flex { display: flex; }

.featured-tiles-block .flex-column,
.featured-collections-block .flex-column { flex-direction: column; }

.featured-tiles-block .position-relative,
.featured-collections-block .position-relative,
.petal-pup-hero-block .position-relative { position: relative; }

.featured-tiles-block .position-absolute,
.featured-collections-block .position-absolute { position: absolute; }

.featured-tiles-block .fixed-bottom,
.featured-collections-block .fixed-bottom { bottom: 0; }

.featured-tiles-block .w-100,
.featured-collections-block .w-100 { width: 100%; }

.featured-tiles-block .h-100,
.featured-collections-block .h-100 { height: 100%; }

/* Flexbox Alignment - scoped to our blocks */
.featured-tiles-block .justify-content-center,
.featured-collections-block .justify-content-center,
.petal-pup-hero-block .justify-content-center { justify-content: center; }

.featured-tiles-block .justify-content-start,
.featured-collections-block .justify-content-start,
.petal-pup-hero-block .justify-content-start { justify-content: flex-start; }

.featured-tiles-block .justify-content-end,
.featured-collections-block .justify-content-end,
.petal-pup-hero-block .justify-content-end { justify-content: flex-end; }

.featured-collections-block .justify-content-md-center { justify-content: center; }

.featured-tiles-block .align-items-center,
.featured-collections-block .align-items-center,
.petal-pup-hero-block .align-items-center { align-items: center; }

.featured-tiles-block .align-items-start,
.featured-collections-block .align-items-start,
.petal-pup-hero-block .align-items-start { align-items: flex-start; }

.featured-tiles-block .align-items-end,
.featured-collections-block .align-items-end,
.petal-pup-hero-block .align-items-end { align-items: flex-end; }

@media (min-width: 576px) {
  .featured-tiles-block .justify-content-sm-center,
  .petal-pup-hero-block .justify-content-sm-center { justify-content: center; }
  .featured-tiles-block .justify-content-sm-start,
  .petal-pup-hero-block .justify-content-sm-start { justify-content: flex-start; }
  .featured-tiles-block .justify-content-sm-end,
  .petal-pup-hero-block .justify-content-sm-end { justify-content: flex-end; }
  .featured-tiles-block .align-items-sm-center,
  .petal-pup-hero-block .align-items-sm-center { align-items: center; }
  .featured-tiles-block .align-items-sm-start,
  .petal-pup-hero-block .align-items-sm-start { align-items: flex-start; }
  .featured-tiles-block .align-items-sm-end,
  .petal-pup-hero-block .align-items-sm-end { align-items: flex-end; }
}

/* Text - scoped to our blocks */
.featured-tiles-block .text-center,
.featured-collections-block .text-center,
.petal-pup-hero-block .text-center { text-align: center; }

.featured-tiles-block .text-left,
.featured-collections-block .text-left,
.petal-pup-hero-block .text-left { text-align: left; }

.featured-tiles-block .text-right,
.featured-collections-block .text-right,
.petal-pup-hero-block .text-right { text-align: right; }

.featured-collections-block .text-white { color: #ffffff; }

.featured-collections-block .h3 { font-size: 1.25rem; font-weight: 600; }

@media (min-width: 576px) {
  .featured-tiles-block .text-sm-center,
  .petal-pup-hero-block .text-sm-center { text-align: center; }
  .featured-tiles-block .text-sm-left,
  .petal-pup-hero-block .text-sm-left { text-align: left; }
  .featured-tiles-block .text-sm-right,
  .petal-pup-hero-block .text-sm-right { text-align: right; }
}

@media (min-width: 768px) {
  .petal-pup-hero-block .text-md-center { text-align: center; }
  .petal-pup-hero-block .text-md-left { text-align: left; }
  .petal-pup-hero-block .text-md-right { text-align: right; }
}