/* css/page-before-and-after.css : before-and-after.html. Owner: wave D.
   Body composition: humphries-int/03 services-hub splits (adapted spec: v2-specs/interiors-spec-before-and-after.md).
   Loaded LAST, after tokens.css + site.css + interior.css. Page rules only: every selector is scoped to
   this page's own classes inside .sheet-body; the chassis (.sheet, .sheet-title, .pill, .contact-band,
   chrome) is never restyled. Fixed px throughout, as in the recipe (Pass 1b: row, text measure and tile
   hold at 1440x900 / 1440x1160 / 1280x900); the rows stack at the recipe's own <= 1119 rule. */

.ba-intro { margin-bottom: 40px; }

/* ------------------------------------------------------------------ rows (1440) */
/* recipe: 691 text measure left, 339 x 191 tile right, rows 36 apart (tile 191 + 36 = 227 pitch);
   here the row spans the 1126 well: text on its left edge, tile on its right edge */
.ba-row {
  display: grid; grid-template-columns: minmax(0, 691px) 339px; justify-content: space-between;
  column-gap: 30px; align-items: start;
}
.ba-row + .ba-row { margin-top: 36px; }
/* the heading's glyph top lands ~31 below the tile top (jpg rows 2-3: 37; row 1: 24) */
.ba-text { padding-top: 22px; }
.ba-h {
  margin: 0 0 26px; font: 400 32px/38.4px var(--font-display); letter-spacing: 0.5px;
  color: var(--steel-pale); text-wrap: balance;
}
.ba-h a { display: inline-block; min-height: 44px; padding: 3px 0; color: inherit; text-decoration: none; }   /* 44 target on one line */
.ba-h a:hover, .ba-h a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ba-sum { margin: 0; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }

/* ------------------------------------------------------------------ the izmir tile (c4-image-zoom) */
.ba-tile {
  position: relative; display: block; width: 339px; aspect-ratio: 339 / 191;
  overflow: hidden; border-radius: 3px; background: #000; color: #fff; text-decoration: none;
}
.ba-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
/* caption bar: full width, 36 tall, 9 above the tile bottom (the jpg, not "pinned"); rgba(0,0,0,0.58).
   Third-face small caps -> Open Sans 600 small caps (class A). Each label sits on its own half */
.ba-bar {
  position: absolute; left: 0; right: 0; bottom: 9px; height: 36px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center;
  background: rgba(0, 0, 0, 0.58);
  font: 600 24px/36px var(--font-body); font-variant: small-caps; letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.91);
  transition: opacity 0.6s ease;
}
.ba-bar__dot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.ba-chev {
  display: none; position: absolute; right: 12px; top: 10px; width: 10px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
.ba-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 24px/1 var(--font-body); font-variant: small-caps; letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.91);
  opacity: 0; transform: translateX(-100%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
@media (hover: hover) {
  .ba-tile:hover img { transform: scale(1.25); opacity: 0.5; }
  .ba-tile:hover .ba-bar { opacity: 0; }
  .ba-tile:hover .ba-more { opacity: 1; transform: none; transition-delay: 0.2s; }
}
/* keyboard gets the hover state too (class B), plus the site ring from site.css */
.ba-tile:focus-visible img { transform: scale(1.25); opacity: 0.5; }
.ba-tile:focus-visible .ba-bar { opacity: 0; }
.ba-tile:focus-visible .ba-more { opacity: 1; transform: none; transition-delay: 0.2s; }
/* touch: the hover layer never fires, so the bar carries a visible link affordance (class B) */
@media (hover: none) { .ba-chev { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .ba-tile img { transition: opacity 0.6s ease; }
  .ba-tile:hover img, .ba-tile:focus-visible img { transform: none; }
  .ba-more, .ba-tile:hover .ba-more, .ba-tile:focus-visible .ba-more { transform: none; }
}

/* ------------------------------------------------------------------ stacked (<= 1119, recipe rule) */
/* humphries: the columns stack in DOM order, text then tile (stated explicitly here) */
@media (max-width: 1119px) {
  .ba-row { grid-template-columns: minmax(0, 1fr); }
  .ba-text { order: 0; padding-top: 0; }
  .ba-tile { order: 1; width: min(100%, 678px); margin-top: 20px; }   /* 678 = the file's natural width */
}

/* ------------------------------------------------------------------ phone (<= 600) */
@media (max-width: 600px) {
  .ba-intro { margin-bottom: 28px; }
  .ba-row + .ba-row { margin-top: 32px; }
  .ba-h { margin-bottom: 12px; font-size: 27px; line-height: 32.4px; }   /* 32 x 0.84, still >= 24 (pale ink) */
  .ba-tile { width: var(--sheet-inner); margin-top: 16px; }             /* full-bleed via .bleed */
}