/* ═══════════════════════════════════════════════════════════
   AEROVANIA — Homepage "Sectors we work in"
   Option A from _preview/sector-options.html (picked 2026-10-15):
   photo mosaic, agriculture as the large lead tile.
   Uses only the site's existing --fx-* colours and fonts.
   Linked after refine.css on index.html only.
   ═══════════════════════════════════════════════════════════ */

/* section head: label, heading and intro in one block */
.sc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 16px 48px; align-items: end; margin-bottom: 36px; }
.sc-head .fx-kicker { grid-column: 1 / -1; }
body .fx .sc-head h2 { font: 600 clamp(32px, 4vw, 52px)/1.05 var(--fx-sans) !important; letter-spacing: -.035em; }
.sc-head h2 span { color: var(--fx-cyan); }
.sc-head p { color: var(--fx-tx); font-size: 16px; line-height: 1.6; }
@media (max-width: 820px) { .sc-head { grid-template-columns: 1fr; } }

/* mosaic */
.scA { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, auto)); gap: 16px; }
.scA-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; margin: 0; overflow: hidden; border-radius: 14px; isolation: isolate; color: #fff; background: #0b1829; }
.scA-tile.big { grid-row: span 2; }
.scA-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.scA-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 17, 31, 0) 30%, rgba(7, 17, 31, .82)); }
.scA-tile:hover img { transform: scale(1.04); }
.scA-cap { padding: 22px 24px; }
body .fx .scA-cap h3 { color: #fff !important; font: 600 24px/1.15 var(--fx-sans) !important; letter-spacing: -.02em; }
body .fx .scA-tile.big .scA-cap h3 { font-size: 32px !important; }
body .fx .scA-cap p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .85) !important; }
.scA-cap .fx-tags { margin-top: 12px; }
.scA-cap .fx-tags span { color: #e6fbff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (max-width: 980px) {
  .scA { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .scA-tile.big { grid-column: span 2; grid-row: auto; min-height: 340px; }
}
@media (max-width: 620px) {
  .scA { grid-template-columns: 1fr; }
  .scA-tile.big { grid-column: auto; }
  .scA-tile { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .scA-tile img { transition: none; } .scA-tile:hover img { transform: none; } }