/*
 * Rose Bronze R7 — desktop services formation (single row of five vertical cards).
 * Layout derived from Codrops "On-Scroll Layout Formations", second formation
 * (css/base.css: .grid--columns / .grid--spaced / .grid__img), MIT License,
 * Copyright (c) 2009 - 2024 Codrops. Full notice in js/services-formation-r7.js
 * and js/vendor/THIRD_PARTY_NOTICES.md.
 *
 * Scope: only (min-width: 1024px). The 768–1023px band and mobile (Scroll Stack R3)
 * are untouched. Motion-only rules sit under html.services-formation-r7-motion,
 * a class set by services-formation-r7.js inside gsap.matchMedia.
 */
@media (min-width: 1024px) {
  /* Source: .grid--columns { repeat(5, 1fr) } + .grid--spaced { gap: var(--page-padding) }.
     Gap scaled to this site's page gutter (.container padding 1.25rem), keeping the
     source relation gap = page padding. Single row: the source's second row holds
     captions that do not exist here. */
  .services-section .services-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 1.25rem;
    margin-top: 2.25rem;
    align-items: stretch;
    /* Keyboard/reading order follows the visual (CSS `order`) sequence below, desktop only.
       Browsers without reading-flow (e.g. Safari, Firefox today) keep DOM order: Bronzeamento first. */
    reading-flow: grid-order;
  }

  /* Visual order: Sobrancelha, Cílios, Bronzeamento (centre), Manicure, Massagens.
     DOM order is untouched (Bronzeamento first in the DOM and on mobile). */
  .services-grid .service-card:nth-child(1) { order: 3; }
  .services-grid .service-card:nth-child(2) { order: 1; }
  .services-grid .service-card:nth-child(3) { order: 2; }
  .services-grid .service-card:nth-child(4) { order: 4; }
  .services-grid .service-card:nth-child(5) { order: 5; }

  /* Equal cards: the featured card loses span 2 / inner 2-col grid only here. */
  .services-grid .service-card,
  .services-grid .service-card.featured {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* Source: .grid--columns .grid__img { aspect-ratio: 2 / 3 }. Photo files unchanged;
     object-fit: cover crops inside the vertical box. */
  .services-grid .service-image-box,
  .services-grid .service-card.featured .service-image-box {
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 3;
    flex: none;
  }
  .services-grid .service-image-box img { display: block; }

  .services-grid .service-badge {
    top: 0.6rem;
    right: 0.6rem;
    max-width: calc(100% - 1.2rem);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
  }

  /* Finish: columns of the five cards line up — title block reserves two lines, the
     description grows (styles.css flex-grow: 1) and the CTA sits on the card's last line. */
  .services-grid .service-body { padding: 1.1rem 0.75rem 1.15rem; }
  .services-grid .service-title { font-size: 1.12rem; line-height: 1.25; min-height: 2.5em; margin-bottom: 0.45rem; }
  .services-grid .service-desc { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.95rem; }
  .services-grid .service-btn {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    white-space: normal;
    text-align: center;
    font-size: 0.75rem;          /* 12px floor */
    letter-spacing: -0.01em;
    line-height: 1.3;
    padding: 0.6rem 0.5rem;
    gap: 0.375rem;
  }
  .services-grid .service-btn span { text-wrap: balance; }
  .services-grid .service-btn svg { flex: none; width: 14px; height: 14px; }

  /* Hover lift kept with the independent `translate` property, so it composes with the
     inline `transform` written by the scroll formation instead of being overridden. */
  .services-grid .service-card:hover { transform: none; translate: 0 -6px; }
  /* `transition: all` would ease every scrubbed transform frame; restrict it. */
  .services-grid .service-card {
    transition-property: translate, border-color, box-shadow, background-color;
  }
}

/* 1024–1279px: "Agendar Bronze de Cabine" cannot fit one line in a 180px card at 12px, so it
   breaks in two balanced lines and all five CTAs share that two-line height. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .services-grid .service-btn { min-height: calc(2 * 1.3em + 1.2rem + 2px); }
}

/* Very short desktop viewports (e.g. 1280×720): tighter vertical box so the card clears
   the fixed header. 1024×768, 1280×800 and 1440×900 keep the source's 2 / 3. */
@media (min-width: 1024px) and (max-height: 760px) {
  .services-grid .service-image-box,
  .services-grid .service-card.featured .service-image-box { aspect-ratio: 3 / 4; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* Source: .grid__img { will-change: transform }. Only while the formation is live. */
  .services-formation-r7-motion .services-grid .service-card { will-change: transform; }
  /* The ±6° outer cards (rotated around their top centre while one viewport lower) reach past
     the 20px gutter at 1024px before the pin starts; clip only the horizontal axis. */
  .services-formation-r7-motion .services-section { overflow-x: clip; }
}