/* =========================================================
   11. WEBSITES CATALOGUE
   ========================================================= */

/* =========================================================
   PACKAGE CAROUSEL — DRAG SCROLL
   ========================================================= */

.website-packages {
  cursor: grab;
  user-select: none;
}

.website-packages.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.website-packages.is-dragging .website-package {
  pointer-events: none;
}

/* =========================================================
   11.1 CATALOGUE SECTION
   ========================================================= */

.websites-catalogue {
  padding: 80px 28px 40px;

  background: transparent;
}

.websites-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================================
   11.2 CATALOGUE HEADER
   ========================================================= */

.catalogue-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, 0.75fr);

  align-items: end;

  gap: 80px;

  margin: 0 auto 70px;
}

.catalogue-header-copy {
  max-width: 760px;
}

.catalogue-header .eyebrow {
  margin-bottom: 20px;
}

.catalogue-header h2 {
  max-width: 720px;

  margin: 0;

  color: var(--ink);

  font-size: clamp(46px, 5vw, 70px);
  font-weight: 700;

  line-height: 0.96;

  letter-spacing: -0.06em;

  text-transform: uppercase;
}

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

.catalogue-intro {
  max-width: 340px;

  margin: 0 0 5px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.75;
}

/* =========================================================
   11.3 PACKAGE SHOWCASE
   ========================================================= */

/*
 * Main package composition:
 *
 *   ┌───────────────────┬────────────────────────────┐
 *   │                   │                            │
 *   │      VISUAL       │      PACKAGE CAROUSEL     │
 *   │                   │                            │
 *   └───────────────────┴────────────────────────────┘
 *
 * The visual and carousel remain side-by-side.
 */

/* =========================================================
   11.3.1 SHOWCASE GRID
   ========================================================= */

.website-packages-showcase {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.78fr)
    minmax(0, 1.22fr);

  align-items: center;

  gap: 55px;

  width: 100%;

  min-width: 0;
}

/* =========================================================
   11.3.2 PACKAGE VISUAL
   ========================================================= */

.website-packages-visual {
  position: relative;

  display: flex;

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

  width: 100%;
  min-width: 0;

  min-height: 650px;

  overflow: visible;

  pointer-events: none;
}

/* =========================================================
   11.3.3 PACKAGE VISUAL STAGE
   ========================================================= */

.website-packages-visual-stage {
  position: relative;

  display: flex;

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

  width: min(100%, 620px);

  height: 100%;
  min-height: 650px;

  overflow: visible;
}

/* =========================================================
   11.3.4 PACKAGE PERSON / IMAGE
   ========================================================= */

.website-packages-person-image {
  position: relative;

  z-index: 4;

  display: block;

  width: 360px;
  height: 580px;

  max-width: none;

  object-fit: contain;
  object-position: center center;

  /*
   * The source artwork contains transparent space,
   * therefore the artwork itself is intentionally oversized.
   */
  scale: 2.1;

  transform: translateX(45px);

  transform-origin: center center;

  filter: drop-shadow(0 25px 35px rgba(23, 58, 48, 0.12));
}

/* =========================================================
   11.3.5 PACKAGE VISUAL GLOW
   ========================================================= */

.packages-glow {
  position: absolute;

  z-index: 0;

  top: 50%;
  left: 50%;

  width: min(520px, 100%);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    circle,
    rgba(57, 230, 164, 0.19) 0%,
    rgba(57, 230, 164, 0.09) 34%,
    rgba(57, 230, 164, 0) 72%
  );

  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   11.3.6 DECORATIVE ORBITS
   ========================================================= */

.packages-orbit {
  position: absolute;

  z-index: 1;

  top: 50%;
  left: 50%;

  width: var(--package-orbit-size);
  height: var(--package-orbit-size);

  transform: translate(-50%, -50%);

  border: 1px solid #bfd4ca;
  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   11.3.7 INNER ORBIT
   ========================================================= */

.packages-orbit-one {
  --package-orbit-size: 500px;
}

/* =========================================================
   11.3.8 OUTER ORBIT
   ========================================================= */

.packages-orbit-two {
  --package-orbit-size: 640px;

  border-style: dashed;

  opacity: 0.65;
}

/* =========================================================
   11.4 PACKAGE CAROUSEL AREA
   ========================================================= */

.website-packages-carousel {
  position: relative;

  z-index: 5;

  width: 100%;
  min-width: 0;
}

/* =========================================================
   11.4.1 PACKAGE CAROUSEL
   ========================================================= */

.website-packages {
  position: relative;

  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: contain;

  cursor: grab;
}

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

.website-packages:active {
  cursor: grabbing;
}

/* =========================================================
   11.4.2 PACKAGE TRACK
   ========================================================= */

.website-packages-track {
  display: flex;

  align-items: stretch;

  gap: 24px;

  width: max-content;

  padding: 15px 80px 25px 0;
}

/* =========================================================
   11.4.3 PACKAGE CARD
   ========================================================= */

.website-package {
  position: relative;

  display: flex;

  flex-direction: column;

  width: clamp(430px, 36vw, 580px);

  min-height: 560px;

  flex: 0 0 clamp(430px, 36vw, 580px);

  box-sizing: border-box;

  overflow: hidden;

  padding: clamp(26px, 3vw, 34px);

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

  border-radius: 12px;

  box-shadow: 0 12px 35px rgba(23, 58, 48, 0.07);

  scroll-snap-align: start;

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

.website-package:hover {
  transform: translateY(-6px);

  box-shadow: 0 22px 50px rgba(23, 58, 48, 0.11);
}

/* =========================================================
   11.4.4 PACKAGE DECORATION
   ========================================================= */

.website-package::after {
  content: "";

  position: absolute;

  right: -150px;
  bottom: -170px;

  width: 430px;
  height: 430px;

  border: 1px solid rgba(57, 230, 164, 0.13);

  border-radius: 50%;

  pointer-events: none;
}

.website-package--webplus::after {
  border-color: rgba(255, 216, 61, 0.18);
}

/* =========================================================
   11.4.5 PACKAGE TOP
   ========================================================= */

.website-package-top {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 25px;

  padding-bottom: 26px;

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

/* =========================================================
   11.4.6 PACKAGE BRAND
   ========================================================= */

.website-package-brand {
  display: flex;

  align-items: center;

  min-width: 0;

  flex: 1 1 auto;
}

.website-package-brand img {
  display: block;

  width: clamp(180px, 18vw, 290px);
  height: clamp(78px, 8vw, 122px);

  max-width: 100%;

  margin: -20px 0;

  object-fit: contain;
  object-position: left center;
}

/* =========================================================
   11.4.7 PACKAGE PRICE
   ========================================================= */

.website-package-price {
  display: flex;

  align-items: baseline;

  flex: 0 0 auto;

  gap: 5px;

  padding-top: 15px;

  white-space: nowrap;
}

.website-package-price span,
.website-package-price small {
  color: var(--muted);

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

  letter-spacing: 0.03em;
}

.website-package-price strong {
  color: var(--ink);

  font-size: clamp(28px, 3vw, 35px);

  font-weight: 750;

  letter-spacing: -0.045em;
}

/* =========================================================
   11.4.8 PACKAGE MAIN
   ========================================================= */

.website-package-main {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 30px;

  flex: 1;

  padding: clamp(24px, 3vw, 30px) 0;
}

/* =========================================================
   11.4.9 PACKAGE COPY
   ========================================================= */

.website-package-copy {
  max-width: 520px;
}

.website-package-label {
  margin: 0 0 15px;

  color: var(--muted);

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

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.website-package-copy h3 {
  margin: 0 0 20px;

  color: var(--ink);

  font-family: "Inter", Arial, sans-serif;

  font-size: clamp(38px, 4vw, 58px);

  font-weight: 750;

  line-height: 0.94;

  letter-spacing: -0.06em;
}

.website-package-copy h3 em {
  color: var(--green-soft);

  font-style: normal;
}

.website-package--webplus .website-package-copy h3 em {
  color: var(--yellow);
}

.website-package-description {
  max-width: 470px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   11.4.10 PACKAGE FEATURES
   ========================================================= */

.website-package-features {
  width: 100%;
}

.website-package-features-title {
  margin: 0 0 17px;

  color: var(--ink);

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

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.package-features {
  display: grid;

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

  gap: 11px 24px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.package-features li {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  color: #53635d;

  font-family: "Inter", Arial, sans-serif;

  font-size: 11px;
  font-weight: 500;

  line-height: 1.35;
}

.package-features li svg {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  padding: 6px;

  box-sizing: border-box;

  background: var(--mint);

  border-radius: 50%;

  fill: none;

  stroke: var(--ink);

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.package-features li span {
  min-width: 0;
}

.package-features-continued svg {
  background: var(--yellow) !important;
}

/* =========================================================
   11.4.11 PACKAGE FOOTER
   ========================================================= */

.website-package-footer {
  position: relative;

  z-index: 2;

  display: flex;

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

  gap: 20px;

  padding-top: 22px;

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

.website-package-type {
  color: var(--muted);

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

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.website-package-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--ink);

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

  text-decoration: none;

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

.website-package-link span:last-child {
  color: var(--green-soft);

  font-size: 17px;

  line-height: 1;

  transition: transform 0.2s ease;
}

.website-package--webplus .website-package-link span:last-child {
  color: var(--yellow);
}

.website-package-link:hover {
  gap: 12px;

  color: var(--green-soft);
}

.website-package--webplus .website-package-link:hover {
  color: var(--yellow);
}

.website-package-link:hover span:last-child {
  transform: translateX(2px);
}

/* =========================================================
   11.4.12 CAROUSEL CONTROLS
   ========================================================= */

.website-packages-controls {
  display: flex;

  align-items: center;

  gap: 15px;

  width: min(580px, 100%);

  margin-top: 8px;
}

.website-packages-scroll-label {
  flex: 0 0 auto;

  color: var(--muted);

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

  letter-spacing: 0.08em;

  text-transform: uppercase;

  white-space: nowrap;
}

.website-packages-scroll-line {
  position: relative;

  width: 100%;
  height: 1px;

  background: var(--line);
}

.website-packages-scroll-line span {
  display: block;

  width: 50%;
  height: 1px;

  background: var(--ink);
}

/* =========================================================
   11.5 COMPACT DESKTOP
   1024PX AND BELOW
   ========================================================= */

@media (max-width: 1024px) {
  .websites-catalogue {
    padding-inline: 24px;
  }

  .catalogue-header {
    gap: 50px;
  }

  .website-packages-showcase {
    grid-template-columns:
      minmax(250px, 0.7fr)
      minmax(0, 1.3fr);

    gap: 35px;
  }

  .website-packages-visual {
    min-height: 560px;
  }

  .website-packages-visual-stage {
    min-height: 560px;
  }

  .website-packages-person-image {
    width: 320px;
    height: 520px;

    scale: 1.8;

    transform: translateX(45px);
  }

  .packages-glow {
    width: 420px;
  }

  .packages-orbit-one {
    --package-orbit-size: 400px;
  }

  .packages-orbit-two {
    --package-orbit-size: 520px;
  }

  .website-packages-track {
    gap: 18px;

    padding-right: 50px;
  }

  .website-package {
    width: 500px;
    flex-basis: 500px;

    min-height: 520px;

    padding: 28px;
  }

  .website-package-brand img {
    width: 220px;
    height: 95px;
  }

  .package-features {
    gap: 10px 14px;
  }
}

/* =========================================================
   11.6 TABLET
   900PX AND BELOW
   ========================================================= */

/*
 * IMPORTANT:
 *
 * The showcase REMAINS A GRID.
 *
 * We do NOT switch to flex-column.
 * We do NOT hide the visual.
 */

@media (max-width: 900px) {
  .websites-catalogue {
    padding-inline: 20px;
  }

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

    gap: 20px;

    margin-bottom: 50px;
  }

  .catalogue-intro {
    max-width: 520px;

    margin: 0;
  }

  .website-packages-showcase {
    grid-template-columns:
      minmax(190px, 0.58fr)
      minmax(0, 1.42fr);

    gap: 22px;

    align-items: center;
  }

  /* -------------------------------------------------------
     VISUAL
     ------------------------------------------------------- */

  .website-packages-visual {
    display: flex;

    min-height: 500px;
  }

  .website-packages-visual-stage {
    min-height: 500px;
  }

  .website-packages-person-image {
    width: 285px;
    height: 460px;

    scale: 1.8;

    transform: translateX(0);
  }

  .packages-glow {
    width: 330px;
  }

  .packages-orbit-one {
    --package-orbit-size: 320px;
  }

  .packages-orbit-two {
    --package-orbit-size: 420px;

    opacity: 0.55;
  }

  /* -------------------------------------------------------
     CAROUSEL
     ------------------------------------------------------- */

  .website-packages-carousel {
    width: 100%;
    min-width: 0;
    padding-right: 120px;
  }

  .website-packages-track {
    gap: 16px;

    padding: 15px 35px 25px 0;
  }

  .website-package {
    width: min(480px, 70vw);

    flex-basis: min(480px, 70vw);

    min-height: 0;

    padding: 25px;
  }

  .website-package-copy h3 {
    font-size: clamp(34px, 5vw, 46px);
  }

  .package-features {
    gap: 10px 14px;
  }
}

/* =========================================================
   11.7 TABLET PORTRAIT
   768PX AND BELOW
   ========================================================= */

@media (max-width: 768px) {
  .websites-catalogue {
    padding: 70px 18px 40px;
  }

  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .catalogue-header {
    gap: 18px;

    margin-bottom: 42px;
  }

  .catalogue-header h2 {
    font-size: clamp(42px, 7vw, 58px);
  }

  /* -------------------------------------------------------
     SHOWCASE GRID
     ------------------------------------------------------- */

  .website-packages-showcase {
    grid-template-columns:
      minmax(145px, 0.48fr)
      minmax(0, 1.52fr);

    gap: 18px;
    margin-left: 120px;
  }

  /* -------------------------------------------------------
     VISUAL
     ------------------------------------------------------- */

  .website-packages-visual {
    min-height: 430px;
  }

  .website-packages-visual-stage {
    min-height: 430px;
  }

  .website-packages-person-image {
    width: 250px;
    height: 400px;

    scale: 2;
  }

  .packages-glow {
    width: 285px;
  }

  .packages-orbit-one {
    --package-orbit-size: 275px;
  }

  .packages-orbit-two {
    --package-orbit-size: 360px;
  }

  /* -------------------------------------------------------
     CAROUSEL
     ------------------------------------------------------- */

  .website-packages-track {
    gap: 14px;

    padding: 12px 30px 22px 0;
  }

  .website-package {
    width: min(430px, 68vw);

    flex-basis: min(430px, 68vw);

    padding: 22px;
  }

  .website-package-top {
    gap: 12px;

    padding-bottom: 20px;
  }

  .website-package-brand img {
    width: 165px;
    height: 72px;
  }

  .website-package-price {
    padding-top: 8px;
  }

  .website-package-price strong {
    font-size: 27px;
  }

  .website-package-main {
    gap: 24px;

    padding: 22px 0;
  }

  .website-package-copy h3 {
    font-size: clamp(32px, 5vw, 42px);
  }

  .website-package-description {
    font-size: 12px;
  }

  .package-features {
    gap: 9px 12px;
  }

  .package-features li {
    gap: 6px;

    font-size: 9px;
  }

  .package-features li svg {
    width: 23px;
    height: 23px;

    flex-basis: 23px;

    padding: 5px;
  }

  .website-package-footer {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }

  .website-packages-controls {
    width: 100%;
  }

  /* -------------------------------------------------------
     CATALOGUE GRID
     ------------------------------------------------------- */

  .catalogue-grid {
    display: grid;

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

    column-gap: 18px;
    row-gap: 35px;

    padding-inline: 4px;

    box-sizing: border-box;
  }
}

/* =========================================================
   11.8 MOBILE
   600PX AND BELOW
   ========================================================= */

/*
 * Still a two-column composition.
 *
 * The visual becomes narrower rather than moving above
 * the package cards.
 */
/* =========================================================
   MOBILE SHOWCASE
   600PX AND BELOW
   ========================================================= */

@media (max-width: 600px) {
  .websites-catalogue {
    padding: 55px 16px 40px;
  }

  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .catalogue-header {
    gap: 15px;
    margin-bottom: 32px;
  }

  .catalogue-header h2 {
    font-size: clamp(36px, 10vw, 48px);
  }

  .catalogue-intro {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.7;
  }

  /* -------------------------------------------------------
     SHOWCASE
     ------------------------------------------------------- */

  .website-packages-showcase {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    width: 100%;
    margin-left: 0px;
  }

  /* -------------------------------------------------------
     VISUAL
     ------------------------------------------------------- */

  .website-packages-visual {
    display: flex;

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

    width: 100%;

    min-height: 330px;
    height: 330px;

    flex: 0 0 330px;

    overflow: visible;
    margin-bottom: -40px;
  }

  .website-packages-visual-stage {
    width: 100%;

    height: 330px;
    min-height: 330px;

    display: flex;

    align-items: center;
    justify-content: center;
  }

  .website-packages-person-image {
    width: 215px;
    height: 340px;

    scale: 1.6;

    transform: translateX(20px);
  }

  .packages-glow {
    width: 230px;
  }

  .packages-orbit-one {
    --package-orbit-size: 220px;
  }

  .packages-orbit-two {
    --package-orbit-size: 285px;

    opacity: 0.45;
  }

  /* -------------------------------------------------------
     CAROUSEL
     ------------------------------------------------------- */

  .website-packages-carousel {
    width: 100%;

    min-width: 0;

    margin-top: -5px;

    padding-inline: 0;

    box-sizing: border-box;
  }

  .website-packages {
    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  .website-packages-track {
    gap: 12px;

    padding: 10px 25px 20px 0;
  }

  .website-package {
    width: calc(100vw - 60px);

    flex-basis: calc(100vw - 60px);

    padding: 19px;

    border-radius: 10px;
  }

  /* -------------------------------------------------------
     PACKAGE HEADER
     ------------------------------------------------------- */

  .website-package-top {
    gap: 8px;

    padding-bottom: 17px;
  }

  .website-package-brand img {
    width: 135px;
    height: 58px;

    margin: -12px 0;
  }

  .website-package-price {
    gap: 2px;

    padding-top: 5px;
  }

  .website-package-price span,
  .website-package-price small {
    font-size: 7px;
  }

  .website-package-price strong {
    font-size: 23px;
  }

  /* -------------------------------------------------------
     PACKAGE CONTENT
     ------------------------------------------------------- */

  .website-package-main {
    gap: 20px;

    padding: 19px 0;
  }

  .website-package-label {
    margin-bottom: 10px;

    font-size: 7px;
  }

  .website-package-copy h3 {
    margin-bottom: 14px;

    font-size: clamp(28px, 7vw, 37px);
  }

  .website-package-description {
    font-size: 11px;

    line-height: 1.6;
  }

  /* -------------------------------------------------------
     FEATURES
     ------------------------------------------------------- */

  .website-package-features-title {
    margin-bottom: 12px;

    font-size: 8px;
  }

  .package-features {
    gap: 8px 8px;
  }

  .package-features li {
    gap: 5px;

    font-size: 8px;
  }

  .package-features li svg {
    width: 20px;
    height: 20px;

    flex-basis: 20px;

    padding: 4px;
  }

  /* -------------------------------------------------------
     FOOTER
     ------------------------------------------------------- */

  .website-package-footer {
    gap: 10px;

    padding-top: 16px;
  }

  .website-package-type {
    font-size: 8px;
  }

  .website-package-link {
    gap: 6px;

    font-size: 9px;
  }

  .website-package-link span:last-child {
    font-size: 14px;
  }

  /* -------------------------------------------------------
     PACKAGE DECORATION
     ------------------------------------------------------- */

  .website-package::after {
    right: -180px;
    bottom: -190px;

    width: 350px;
    height: 350px;
  }

  /* -------------------------------------------------------
     CATALOGUE GRID
     ------------------------------------------------------- */

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

    column-gap: 10px;
    row-gap: 22px;

    padding-inline: 3px;
  }
}