/* ============================================================
   DESKTOP BREAKPOINT OVERRIDES (641px and up)
   
   Override mobile defaults for tablet and desktop screens.
   Only define what changes; don't repeat mobile styles.
   ============================================================ */
@media (min-width: 641px) {
  :root {
    /* Desktop-optimized padding for larger screens */
    --h-card-padding-block: 2.8rem;
    --h-card-padding-inline: 4.5rem;
    --h-card-border-radius: 1.25rem;

    /* Fixed heading scale for desktop (no mobile scaling) */
    --font-size-heading: clamp(4rem, 3.4rem + 1.5vw, 4.75rem);
    --letter-space-heading: -2%;
    /* Fixed body text on desktop */
    --font-size-p: 2rem;
  }

  /* Hero image - wider aspect ratio for desktop */
  /* .hero__display img {
    aspect-ratio: 1440/810;
  } */

  /* Section paragraph - increased line-height and padding */
  .section__p {
    line-height: 1.25;
    padding-inline: 1rem;
  }

  /* Secondary product - wider aspect ratio for desktop */
  .secondary-section__product {
    aspect-ratio: 1440/800;
  }

  .fourth-section .section__heading {
    max-width: 80%;
    margin: auto;
  }

  /* Increase spacing after full-width sections on desktop */
  .section__fullwidth-img + .section__p,
  .tile + .section__p {
    margin-top: clamp(2rem, 3.8rem + -2vw, 3rem);
    text-wrap: balance;
  }

  /* TILE LAYOUT - Horizontal row on desktop instead of vertical stack */
  .tile,
  .tile--tight {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Tile cards stretch equally with adjusted gap */
  .tile__card {
    gap: clamp(2rem, 3.8rem + -2vw, 3rem);
  }

  /* BENTO GRID - 4-column layout with image on left
     Layout areas:
     | img | card1 | card2 |
     | img | card3 | card4 |
  */
  .bento {
    grid-template-columns: 4fr 3fr 3fr;
    gap: 1.3125rem;
    grid-template-areas:
      "img card1 card2"
      "img card3 card4";
  }

  /* Reversed bento - image on right instead of left */
  .bento--reversed {
    grid-template-columns: 3fr 3fr 4fr;
    grid-template-areas:
      "card1 card2 img"
      "card3 card4 img";
  }

  /* Reversed bento - image on right instead of left */
  .bento--custom {
    grid-template-areas:
      "card1 card1 img"
      "card3 card4 img";
  }

  .bento--custom .bento__card:nth-of-type(2) {
    min-height: 20.5rem;
  }

  /* Assign grid areas to elements based on DOM order */
  .bento__img {
    grid-area: img;
  }
  .bento__card:nth-of-type(2) {
    grid-area: card1;
  }
  .bento__card:nth-of-type(3) {
    grid-area: card2;
  }
  .bento__card:nth-of-type(4) {
    grid-area: card3;
  }
  .bento__card:nth-of-type(5) {
    grid-area: card4;
  }

  /* Desktop bento card - tighter spacing and rounded corners */
  .bento__card {
    border-radius: clamp(1.25rem, 3.5rem + -2.5vw, 2.5rem);
    /* padding-block: 2.5rem; */
    padding-inline: clamp(2.5rem, 3.625rem - 1.25vw, 3.125rem);
    gap: clamp(1.25rem, 2.6rem + -1.5vw, 2rem);
  }

  /* Highlight card adjustments for desktop layout */
  .highlight__card {
    border-radius: clamp(1.25rem, 3.5rem + -2.5vw, 2.5rem);
    gap: clamp(1.25rem, 2.6rem + -1.5vw, 2rem);
    flex: 1;
    justify-content: flex-start;
  }

  /* Card paragraph - larger on desktop */
  .bento__card-p {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  /* Card icons - fixed size on desktop */
  .bento__card-icon,
  .highlight__card-icon {
    width: 3rem;
  }

  /* Highlight grid - increased gap for spacing */
  .highlight-grid {
    gap: 1.3125rem;
  }

  /* Main highlight block - horizontal layout with image/text side-by-side */
  .highlight__main-blk {
    padding: 1.25rem 1.75rem 1.25rem 4.5rem;
    flex-direction: row;
    gap: 0;
  }

  /* Highlight text - larger and tighter line-height */
  .highlight__caption-txt,
  .highlight__card-p {
    line-height: 1.25;
    font-size: 1.5rem;
  }

  /* Caption width constraint for readability */
  .highlight__caption-txt {
    max-width: 28rem;
  }

  /* Highlight cards - horizontal row layout on desktop */
  .highlight__cards-blk {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Gemini icon - slightly constrained on desktop */
  .icon-gemini {
    width: clamp(3rem, 3.225rem + -0.25vw, 3.125rem);
    margin-bottom: clamp(1rem, 1.225rem + -0.25vw, 1.125rem);
  }

  /* Fixed size override for desktop - single value only, no responsive scaling */
  .legal__p {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* SPACER UTILITIES - Fixed heights on desktop (no scaling) */
    .spacer-60 {
    height: 3rem;
  }

  .spacer-80 {
    height: 5rem;
  }

  .spacer-120 {
    height: 7.5rem;
  }

  .spacer-160 {
    height: 10rem;
  }
}

/* ============================================================
   LARGE DESKTOP BREAKPOINT (1154px and up)
   
   Refinements for very wide screens.
   ============================================================ */
@media (min-width: 1154px) {
  /* Remove side padding on large screens - content is centered */
  .content-container {
    padding-inline: 0;
  }
}

/* ============================================================
   TABLET BREAKPOINT FIX (641px - 1023px)
   
   Special handling for mid-range viewports where default
   responsive scaling doesn't look good. Uses fixed sizes.
   ============================================================ */

/* FOR BENTO BOXES & HIGHLIGHT GRID ONLY DUE TO LAYOUT NOT VISUALLY 
PLEASING ON THIS VIEWPORTS - Fixed sizes (no responsive resize) */

@media (min-width: 641px) and (max-width: 1023px) {
  /* Card layout - fixed dimensions for better appearance on tablets */
  .bento__card,
  .highlight__card {
    /* Fixed size - single value only, no responsive scaling */
    border-radius: 1.25rem;
    padding-block: 1.125rem;
    padding-inline: 1.25rem;
    gap: 0.875rem;
  }

  /* Card icons - fixed square size */
  .bento__card-icon,
  .highlight__card-icon {
    /* Fixed size - single value only, no responsive scaling */
    height: 1.75rem;
    width: 1.75rem;
  }

  /* Card text - consistent readable size */
  .bento__card-p,
  .highlight__caption-txt,
  .highlight__card-p {
    /* Fixed size - single value only, no responsive scaling */
    font-size: 1.125rem;
  }
}