/* MORARI grid + button fix (v1, 2026-11-01). Alignment and sizes only: no colour, font, copy, image or layout-concept change.
   Page-scoped by the class names each page already uses (.work-list = home, .rates-grid = rates + ai-services). */

/* ---------- GRIDS ---------- */
/* Home lists: tag column was `auto`, so every row sized it differently (tag x ragged 1050.8..1104.1 = 53px) and the
   year column was 56px in Works vs 96px in Services. Fixed tracks make both lists share one column grid. */
/* CODA QC 11-01: from 1200px only. At 721-1199px the fixed 270px tag column squeezed titles to 3 lines (live: 2). */
@media (min-width: 1200px) {
  .work-list:not(.is-carousel) a { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 270px) 96px; }
  .work-list .year { min-width: 96px; }
}
/* Home lists: row text sat 8px inside the section edge (numbers at x=65.6 vs headings at 57.6, year right edge 1374.4
   vs section-head right edge 1382.4). Zero the row inset; the hover tint keeps its old 8px reach through box-shadow. */
.work-list:not(.is-carousel) a { padding-left: 0; padding-right: 0; }
.work-list:not(.is-carousel) li:hover { box-shadow: -8px 0 0 var(--bg-2), 8px 0 0 var(--bg-2); }

/* Rates + AI Services: 3-card grids in a 2-col grid left an orphan card in the last row (card 3 alone, right half empty).
   Wide screens: 3 equal columns. Tablet: the odd last card spans the row. */
@media (min-width: 1200px) {
  .rates-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 721px) and (max-width: 1199px) {
  .rates-grid > .rate-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}
/* Cards in one row: when the spec text wraps differently, divider + footer rows drifted apart. Pin them to the card bottom. */
.rate-card .divider { margin-top: auto; }

/* Rates + AI Services footer: middle link was pushed off-centre by the unequal side texts (centre at x=797.7 vs 720).
   Equal-width outer slots centre it. */
@media (min-width: 721px) {
  footer > :first-child:nth-last-child(3), footer > :last-child:nth-child(3) { flex: 1 1 0; }
  footer > :nth-child(2):nth-last-child(2) { text-align: center; }
  footer > :last-child:nth-child(3) { text-align: right; }
}

/* ---------- BUTTONS / TAP TARGETS (phones) ---------- */
@media (max-width: 720px) {
  /* Home hero: the two company-profile buttons wrapped into different widths (237px vs 150px). Same width, centred label. */
  .cp-actions .cp-btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }

  /* Home 'Our works.' heading was squeezed to two lines by the meta text beside it (Services section already stacks). Same stacking. */
  #work .section-head { grid-template-columns: 1fr; }

  /* Burger 40x34, theme toggle 29.6px tall, menu links 17px tall (all under 44px). */
  .nav-burger { width: 44px; height: 44px; }
  nav.top .nav-logo-link { min-height: 44px; min-width: 44px; }  /* logo link 30x22 */
  nav.top .theme-toggle { min-height: 44px; }
  nav.top .right ul, nav.top ul .submenu { gap: 0; }
  nav.top .right ul a { display: flex; align-items: center; min-height: 44px; }

  /* Small text links and trigger rows (17-21px tall). Min-height 44 with matching negative margin: bigger hit area, same layout. */
  .breadcrumb a, .section-head a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13.5px; }
  .rate-card .best-for a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13.5px; }
  .rate-card .price.send-brief-trigger, .rate-card a.price-link { display: flex; align-items: center; min-height: 44px; margin-block: -11.5px; }

  /* Footer + social links 16-19px tall. */
  footer a, .socials a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Modal close 32px circle. */
  .modal-close { width: 44px; height: 44px; }
}