/*
 * main.css
 *
 * This file contains the main layout styles and media queries
 * to adjust sizing and spacing based on viewport width.
 * CSS variables defined in :root are overridden within media queries
 * to achieve breakpoint-specific content scaling.
 */

.featured-accessories {
   width: 100%;
   max-width: var(--max-w-container);
   margin: var(--m-container);
}

.featured-accessories__heading {
   text-align: center;
   font-size: var(--fs-heading);
   font-weight: var(--fw-heading);
   margin: var(--m-heading);
   line-height: var(--lh-heading);
}

.product-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto auto;
   grid-template-areas:
      "item-1 item-2 item-2"
      "item-3 item-4 item-5";
}

.product-card {
   background-color: var(--clr-bg-card);
   border: 5px solid var(--clr-border-white); /* Border is kept as fixed px */
   border-radius: 20px; /* Border radius is kept as fixed px */
   overflow: hidden;
   display: flex;
   flex-direction: column;
   text-align: center;
}

.item-1 {
   grid-area: item-1;
}
.item-2 {
   grid-area: item-2;
}
.item-3 {
   grid-area: item-3;
}
.item-4 {
   grid-area: item-4;
}
.item-5 {
   grid-area: item-5;
}

/* Makes the whole card clickable */
.product-card__link {
   display: flex;
   flex-direction: column;
   height: 100%;
   color: inherit;
}

/* Card content wrapper */
.product-card__tile-content {
   padding: var(--p-card);
   display: flex;
   flex-direction: column;
   height: 100%;
}

/* Product image container */
.product-card__image-container {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Product info container */
.product-card__info-section {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

/* COLOR GALLERY FIELD */
.product-card__color-section {
   height: var(--h-color-section-container);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
}

.product-card__color-gallery {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   height: var(--h-color-gallery-container);
}

.product-card__color-dot-item {
   margin-inline: var(--mx-dot);
   display: flex;
   justify-content: center;
   align-items: center;
}

.product-card__color-dot-item img {
   width: var(--size-color-dot);
   height: var(--size-color-dot);
   object-fit: cover;
}

.product-card__color-dot-item--more {
   margin-inline: var(--mx-plus);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: var(--fs-plus);
   font-weight: var(--fw-plus);
   height: 100%;
}

/* VIOLATOR FIELD */
.product-card__violator {
   height: var(--h-violator-container);
   margin-top: var(--mt-violator);
   display: flex;
   justify-content: center;
   align-items: center;
}

.product-card__violator-badge {
   color: var(--clr-violator);
   font-size: var(--fs-violator);
   font-weight: var(--fw-violator);
   letter-spacing: var(--ls-violator);
   height: 100%;
}

/* TITLE FIELD */
.product-card__title {
   margin-bottom: var(--mb-title);
   padding: var(--p-title);
   font-size: var(--fs-title);
   font-weight: var(--fw-title);
   transition: all 0.1s ease;
}

.product-card__title:hover {
   color: var(--clr-hover-link);
   text-decoration: underline;
}

/* PRICE FIELD */
.product-card__price {
   font-size: var(--fs-price);
   color: var(--clr-text-secondary);
   height: var(--h-price-container);
   margin: var(--m-price);
}

.item-2 .product-card__image-container {
   margin: var(--m-item2-image);
   width: var(--w-item2-image);
}

.item-2 .product-card__image-container img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
}

/* SHOP LINK FIELD */
.shop-link-container {
   text-align: center;
   padding-top: var(--pt-shop-link-container);
   padding-inline: var(--px-shop-link-container);
   color: var(--clr-hover-link);
}

.shop-link {
   font-size: var(--fs-shop-link);
   font-style: normal;
   letter-spacing: var(--ls-shop-link);
   line-height: var(--lh-shop-link);
   display: inline-block;
}

.shop-link:hover {
   text-decoration: underline;
}

.shop-link::after {
   content: "";
   display: inline-block;
   width: var(--w-shop-link-arrow);
   height: var(--h-shop-link-arrow);
   margin-left: var(--ml-shop-link-arrow);
   margin-bottom: var(--mb-shop-link-arrow);
   vertical-align: middle;
   background-image: url("data:image/svg+xml,%3Csvg width='5' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000%2Fsvg'%3E%3Cpath d='M1.5 1.5L10.5 10L1.5 18.5' stroke='%230066CC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center right;
   background-size: contain;
}

/* --- Manual Image Container Padding for Alignment --- */
/* Adjust for desktop */
.item-1 .product-card__image-container {
   padding-top: 4rem; /* 64px */
   padding-bottom: 4.063rem; /* ~65px */
}

.item-3 .product-card__image-container,
.item-4 .product-card__image-container {
   padding-top: 0.938rem; /* ~15px */
   padding-bottom: 0.625rem; /* 10px */
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
   .product-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
         "item-2 item-2"
         "item-1 item-3"
         "item-4 item-5";
   }

   /* Override variables for Mobile breakpoint */
   :root {
      --fs-heading: 1.75rem; /* 28px */
      --fs-title: 0.75rem; /* 12px */
      --fs-price: 0.8125rem; /* 13px */
      --fs-violator: 0.75rem; /* 12px */
      --fs-plus: 0.8125rem; /* 13px */
      --fs-shop-link: 0.9375rem; /* 15px */

      --m-heading: 1.875rem 0 1.25rem; /* 30px 0 20px */
      --m-container: 1.875rem auto 3.125rem; /* 30px auto 50px */
      --mt-violator: 0.75rem; /* 12px */
      --m-price: auto 0 0.375rem; /* auto 0 6px */
      --p-card: 1rem; /* 16px */
      --p-title: 0.5rem 0.625rem 0.8125rem; /* 8px 10px 13px */

      --h-color-section-container: 1.5rem; /* 24px */
      --h-color-gallery-container: 0.8125rem; /* 13px */
      --h-violator-container: 1rem; /* 16px */
      --h-title-container: 3.5rem; /* 56px */
      --h-price-container: 1rem; /* 16px */
      --pt-shop-link-container: 1.25rem; /* 20px */
      --px-shop-link-container: 1rem; /* 16px */

      --size-color-dot: 0.625rem; /* 10px */
      --mx-dot: 0.1875rem; /* 3px */
      --mx-plus: 0.0625rem; /* 1px */
      --w-shop-link-arrow: 0.3125rem; /* 5px */
      --h-shop-link-arrow: 1rem; /* 16px */
      --ml-shop-link-arrow: 0.1875rem; /* 3px */
      --mb-shop-link-arrow: 0.0625rem; /* 1px */

      --m-item2-image: -1rem -1rem 0; /* -16px -16px 0 */
      --w-item2-image: calc(100% + 2rem); /* calc(100% + 32px) */
   }

   .featured-accessories {
      padding-inline: 0.5rem; /* 8px */
   }

   /* Mobile specific manual image container padding */
   .item-1 .product-card__image-container {
      padding-top: 0.125rem; /* 2px */
      padding-bottom: 0rem; /* 0px */
   }

   .item-3 .product-card__image-container,
   .item-4 .product-card__image-container {
      padding-top: 0.375rem; /* 6px */
      padding-bottom: 0.375rem; /* 6px */
   }

   .item-5 .product-card__image-container {
      padding-bottom: 0.125rem; /* 2px */
   }
}

/* Tablet (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
   .product-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
         "item-1 item-2 item-2"
         "item-3 item-4 item-5";
   }

   /* Override variables for Tablet breakpoint */
   :root {
      --fs-heading: 2rem; /* 32px */
      --fs-title: 0.688rem; /* ~11px */
      --fs-price: 0.688rem; /* ~11px */
      --fs-violator: 0.625rem; /* 10px */
      --fs-plus: 0.688rem; /* ~11px */
      --fs-shop-link: 0.813rem; /* ~13px */

      --m-heading: 2.5rem 0 1.5rem; /* 40px 0 24px */
      --m-container: 2.5rem auto 5rem; /* 40px auto 80px */
      --mt-violator: 1rem; /* 16px */
      --mb-title: 0.375rem; /* 6px */
      --m-price: auto 0 0.4375rem; /* auto 0 7px */
      --p-card: 1.25rem 1.25rem 1.063rem; /* 20px 20px ~17px */
      --p-title: 0.5rem 0.8125rem 1.25rem; /* 8px 13px 20px */

      --h-color-section-container: 1.625rem; /* 26px */
      --h-color-gallery-container: 0.813rem; /* ~13px */
      --h-violator-container: 1.125rem; /* 18px */
      --h-title-container: 4rem; /* 64px */
      --h-price-container: 1.125rem; /* 18px */
      --pt-shop-link-container: 1.375rem; /* 22px */
      --px-shop-link-container: 1.125rem; /* 18px */

      --size-color-dot: 0.563rem; /* ~9px */
      --mx-dot: 0.188rem; /* ~3px */
      --mx-plus: 0.063rem; /* ~1px */
      --w-shop-link-arrow: 0.34375rem; /* ~5.5px */
      --h-shop-link-arrow: 1.125rem; /* 18px */
      --ml-shop-link-arrow: 0.25rem; /* 4px */
      --mb-shop-link-arrow: 0.125rem; /* 2px */

      --m-item2-image: -1.25rem -1.25rem 0; /* -20px -20px 0 */
      --w-item2-image: calc(100% + 2.5rem); /* calc(100% + 40px) */
   }

   .featured-accessories {
      padding-inline: 0.75rem; /* 12px */
   }

   /* Tablet specific manual image container padding */
   .item-1 .product-card__image-container {
      padding-top: 3.5rem; /* 56px */
      padding-bottom: 1.5rem; /* 24px */
   }

   .item-3 .product-card__image-container,
   .item-4 .product-card__image-container {
      padding-top: 0.75rem; /* 12px */
      padding-bottom: 0.375rem; /* 6px */
   }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
   .product-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      grid-template-areas:
         "item-1 item-2 item-2"
         "item-3 item-4 item-5";
   }
   /* Desktop specific manual image container padding */
   .item-1 .product-card__image-container {
      padding-top: 4rem; /* 64px */
      padding-bottom: 4.063rem; /* ~65px */
   }

   .item-3 .product-card__image-container,
   .item-4 .product-card__image-container {
      padding-top: 0.938rem; /* ~15px */
      padding-bottom: 0.625rem; /* 10px */
   }
}