/* =========================================================
   10. WEBSITES SHOWCASE
   ========================================================= */

.websites-showcase {
  padding: 20px 28px 60px;

  background:
    linear-gradient(
      to bottom,
      var(--white) 0%,
      rgba(255, 255, 255, 0.98) 22%,
      rgba(255, 255, 255, 0.86) 42%,
      rgba(255, 255, 255, 0.78) 68%,
      rgba(255, 255, 255, 0.73) 100%
    ),
    url("../../images/Webstore-background.webp");

  background-position: center bottom;
  background-repeat: repeat;
  background-size: contain;
}

.websites-container {
  max-width: 1200px;

  margin: 0 auto;
}

/* ---------------------------------------------------------
   Section Header
   --------------------------------------------------------- */

.websites-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;

  gap: 60px;

  margin-bottom: 55px;
}

.websites-heading .eyebrow {
  margin-bottom: 20px;
}

.websites-heading h2 {
  max-width: 600px;

  margin: 0;

  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 700;
  line-height: 0.98;

  letter-spacing: -0.055em;

  text-transform: uppercase;
}

.websites-heading h2 em {
  color: var(--green-soft);
  font-style: normal;
}

.websites-intro {
  max-width: 330px;

  margin: 0 0 5px;

  padding-bottom: 2em;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.7;
}
/* =========================================================
   11. WEBSITE SEARCH & FILTERS
   ========================================================= */

.websites-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 32px;
  padding-bottom: 22px;

  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.website-search-wrapper {
  width: 60%;
}

.website-search {
  position: relative;

  width: 100%;
}

.website-search input {
  width: 100%;
  height: 45px;

  padding: 0 42px 0 15px;

  border: 1px solid var(--line);
  border-radius: 7px;

  background: #f8faf8;
  color: var(--ink);

  outline: none;

  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.website-search input:focus {
  border-color: #9db9ad;
  background: var(--white);
}

.website-search input::placeholder {
  color: #8a9691;
}

.website-search span {
  position: absolute;

  top: 50%;
  right: 14px;

  transform: translateY(-50%);

  color: #71817b;

  font-size: 20px;
  line-height: 1;
}

/* ---------------------------------------------------------
   Search Context
   --------------------------------------------------------- */

.website-search-context {
  opacity: 1;
  display: flex;
  align-items: baseline;

  width: 100%;

  margin-top: 8px;
  padding: 0 2px;

  color: var(--ink);

  font-family: "Inter", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;

  line-height: 1.4;

  white-space: nowrap;

  animation: websiteSearchContextIn 0.2s ease;
}

.website-search-context[hidden] {
  opacity: 0;
}

.website-search-context-label {
  flex-shrink: 0;

  color: var(--ink);

  font-size: inherit;
  font-weight: 500;
}

.website-search-context-values {
  display: inline;

  margin-left: 4px;

  color: var(--mint);

  font-size: inherit;
  font-weight: 600;

  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   Search Context Animation
   --------------------------------------------------------- */

@keyframes websiteSearchContextIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.website-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;
}

.filter-button {
  padding: 9px 14px;

  background: transparent;

  border: 1px solid transparent;
  border-radius: 6px;

  color: #64716d;

  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.filter-button:hover {
  background: #f1f6f3;
  color: var(--ink);
}

.filter-button.active {
  background: var(--ink);
  color: var(--white);
}

/* =========================================================
   12. WEBSITE GRID
   ========================================================= */

.website-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 42px 24px;
}

/* =========================================================
   13. WEBSITE CARD
   ========================================================= */

.website-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--line);
  border-radius: 10px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 4;
}

.website-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 14px 30px #173a3030;
}

.website-card.is-hidden {
  display: none !important;
}

/* ---------------------------------------------------------
   Website Card Image
   --------------------------------------------------------- */

.website-card-image {
  position: relative;

  aspect-ratio: 16 / 10;

  z-index: 1;
  isolation: isolate;
  background: #e8ece9;
}

.website-card-image img {
  position: absolute;
  z-index: 0;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: top center;

  transition: transform 0.3s ease;
}

.website-card-image::before {
  content: "";

  position: absolute;
  z-index: 1;

  left: 0;
  right: 0;
  bottom: -100%;

  height: 100%;

  background: color-mix(in srgb, var(--mint) 70%, transparent);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  transition: bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.website-card-image:hover img {
  scale: 1.05;
}

.website-card-image:hover::before {
  bottom: 0;
}

/* =========================================================
   14. WEBSITE CARD — CORNER BADGE
   ========================================================= */

.website-card-badge {
  position: absolute;

  top: 17px;
  left: -39px;

  z-index: 4;

  width: 145px;

  padding: 7px 0;

  background: var(--yellow);

  color: var(--ink);

  text-align: center;

  transform: rotate(-45deg);

  font:
    700 9px "DM Mono",
    monospace;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  box-shadow: 0 4px 12px #173a3015;
}

.badge-popular {
  background: var(--yellow);
  color: var(--ink);
}

.badge-new {
  background: var(--mint);
  color: var(--ink);
}

/* =========================================================
   15. WEBSITE CARD — NAME
   ========================================================= */

.website-card-name {
  position: absolute;

  left: 15px;
  bottom: 10px;

  z-index: 3;

  padding: 10px 14px;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(219, 225, 220, 0.8);
  border-radius: 7px;

  box-shadow: 0 7px 20px #0f251fa8;

  backdrop-filter: blur(5px);
}

.website-card-name h3 {
  margin: 0;

  color: var(--ink);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: -0.025em;
}

/* =========================================================
   16. WEBSITE CARD — HOVER CATEGORY COPY
   ========================================================= */

.website-card-overlay-copy {
  position: absolute;
  z-index: 2;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 28px;

  color: var(--ink);
  text-align: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.25s ease;
}

.website-card-overlay-copy span {
  color: var(--yellow);

  font:
    600 9px "DM Mono",
    monospace;

  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #172421;
}

.website-card-overlay-copy strong {
  max-width: 18ch;

  color: white;

  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.035em;
  text-shadow: 1px 1px 1px #172421;
}

.website-card-image:hover .website-card-overlay-copy {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Touch devices reveal the overlay only after a tap. */
@media (hover: none), (pointer: coarse) {
  .website-card-image:hover img {
    scale: 1;
  }

  .website-card-image:hover::before {
    bottom: -100%;
  }

  .website-card-image:hover .website-card-overlay-copy {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
  }

  .website-card-image.is-overlay-active img {
    scale: 1.05;
  }

  .website-card-image.is-overlay-active::before {
    bottom: 0;
  }

  .website-card-image.is-overlay-active .website-card-overlay-copy {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .website-card-overlay-copy {
    transition: none;
  }
}
/* =========================================================
   17. WEBSITE CARD — PRICE
   ========================================================= */

.website-card-price {
  position: relative;
  z-index: 2;
  min-height: 62px;

  padding: 12px 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--ink);
  color: var(--white);
}

.website-card-price a {
  text-decoration: none;
}

/* Price Information */

.website-card-price > div {
  display: flex;
  align-items: baseline;

  gap: 6px;

  min-width: 0;
}

.website-card-price > span {
  color: #aab8b2;

  font:
    500 9px "DM Mono",
    monospace;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.website-card-price strong {
  color: var(--white);

  font-size: 19px;
  font-weight: 750;

  letter-spacing: -0.04em;
}

.website-card-price small {
  color: #aab8b2;

  font:
    500 10px "DM Mono",
    monospace;
}

/* ---------------------------------------------------------
   Price Arrow
   --------------------------------------------------------- */

.website-card-price .price-arrow {
  width: 31px;
  height: 31px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #52615c;
  border-radius: 50%;

  color: var(--white);

  font-family: Arial, sans-serif;
  font-size: 15px;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.website-card:hover .price-arrow {
  background: var(--mint);
  border-color: var(--mint);

  color: var(--ink);

  transform: translateX(2px);
}

/* ---------------------------------------------------------
   Sale Badge
   --------------------------------------------------------- */

.sale--card {
  display: inline-flex !important;
  align-items: center;

  margin-left: 4px;
  padding: 4px 7px;

  background: var(--coral);
  color: #172421 !important;

  border-radius: 4px;

  font:
    700 8px "DM Mono",
    monospace !important;

  line-height: 1;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;

  white-space: nowrap;
}

/* =========================================================
   18. WEBSITES — BROWSE ALL CTA
   ========================================================= */

.websites-cta {
  display: flex;
  justify-content: center;

  margin-top: 55px;
}

.websites-cta .text-link {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  padding-bottom: 4px;

  color: var(--ink);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;

  transition:
    gap 0.2s ease,
    color 0.2s ease;
}

.websites-cta .text-link span {
  font-size: 17px;
}

.websites-cta .text-link:hover {
  gap: 17px;
  color: var(--mint);
}

@media (max-width: 950px) {
  /* -------------------------------------------------------
     Websites Showcase
     ------------------------------------------------------- */

  .websites-showcase {
    padding: 10px 28px 100px;
  }

  .websites-header {
    z-index: 2;

    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: end;

    column-gap: 80px;

    padding-bottom: 65px;
  }

  .websites-intro {
    max-width: 500px;

    padding-bottom: 0;
  }

  /* -------------------------------------------------------
     Controls
     ------------------------------------------------------- */

  .websites-controls {
    align-items: flex-start;

    flex-direction: column;

    gap: 20px;
  }

  .website-search-wrapper {
    width: 100%;
  }

  .website-search {
    width: 100%;
  }

  .website-search-context {
    margin-top: 8px;
  }

  .website-filters {
    width: 100%;
  }

  /* -------------------------------------------------------
     Grid
     ------------------------------------------------------- */

  .website-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 35px 20px;
  }
}

/* =========================================================
   22. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {
  /* -------------------------------------------------------
     Header
     ------------------------------------------------------- */

  .site-header {
    gap: 15px;
  }

  .brand-logo {
    width: 140px;
    max-height: 42px;
  }

  /* -------------------------------------------------------
     Websites Showcase
     ------------------------------------------------------- */

  .websites-showcase {
    padding: 25px 21px 85px;
  }

  .websites-header {
    grid-template-columns: 1fr;

    gap: 25px;

    padding-bottom: 10px;
  }

  .websites-heading h2 {
    font-size: 42px;
  }

  .websites-intro {
    max-width: none;

    font-size: 14px;
  }

  /* -------------------------------------------------------
     Controls
     ------------------------------------------------------- */

  .websites-controls {
    gap: 20px;

    margin-bottom: 25px;
  }

  .website-search {
    width: 100%;
    max-width: none;
  }

  /* -------------------------------------------------------
     Search Context
     ------------------------------------------------------- */

  .website-search-context {
    margin-top: 7px;
    padding: 0 1px;

    font-size: 9px;

    line-height: 1.4;
  }

  .website-search-context-label,
  .website-search-context-values {
    font-size: 9px;
  }

  /* -------------------------------------------------------
     Filters
     ------------------------------------------------------- */

  .website-filters {
    width: 100%;

    overflow-x: auto;

    flex-wrap: nowrap;

    padding-bottom: 4px;

    scrollbar-width: none;
  }

  .website-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-button {
    flex-shrink: 0;
  }

  /* -------------------------------------------------------
     Grid
     ------------------------------------------------------- */

  .website-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  /* =======================================================
     Website Card
     ======================================================= */

  .website-card {
    border-radius: 9px;
  }

  /* -------------------------------------------------------
     Card Name
     ------------------------------------------------------- */

  .website-card-name {
    left: 12px;
    bottom: 12px;

    padding: 8px 11px;

    border-radius: 6px;
  }

  .website-card-name h3 {
    font-size: 13px;
  }

  /* -------------------------------------------------------
     Card Category
     ------------------------------------------------------- */

  /*
   * When both the name and category are present,
   * give the category room above the name.
   */

  /* -------------------------------------------------------
     Price
     ------------------------------------------------------- */

  .website-card-price {
    min-height: 58px;

    padding: 10px 13px;
  }

  .website-card-price strong {
    font-size: 17px;
  }

  .website-card-price .price-arrow {
    width: 28px;
    height: 28px;

    font-size: 14px;
  }

  /* -------------------------------------------------------
     CTA
     ------------------------------------------------------- */

  .websites-cta {
    margin-top: 45px;
  }

  /* -------------------------------------------------------
     Sale Badge
     ------------------------------------------------------- */

  .sale--card {
    font:
      700 6px "DM Mono",
      monospace !important;
  }
}

/* =========================================================
   23. RESPONSIVE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {
  .websites-heading h2 {
    font-size: 38px;
  }

  .website-card-price > div {
    gap: 4px;
  }

  .website-card-price > div > span {
    font-size: 8px;
  }

  .website-card-price strong {
    font-size: 16px;
  }

  /* -------------------------------------------------------
     Search Context
     ------------------------------------------------------- */

  .website-search-context {
    font-size: 8px;
  }

  .website-search-context-label,
  .website-search-context-values {
    font-size: 8px;
  }
}
@media (max-width: 600px) {
  .website-card-overlay-copy {
    padding: 20px;
  }

  .website-card-overlay-copy strong {
    font-size: clamp(16px, 4vw, 20px);
  }
}