/* Company-site additions on top of the shared site.css. The company has no
   logo mark, so its header uses a plain wordmark. Rationale: docs/websites.md */

/* the company pages are a single narrow column, so the wrap itself narrows */
.wrap { width: min(56rem, 100% - 2.5rem); }

/* one fixed icon size shared by the flagship card and the product rows; very
   narrow phones step it down together with the flagship app name */
:root { --app-icon: 4rem; }
@media (max-width: 359.98px) { :root { --app-icon: 3rem; } }

/* padding keeps the link's tap target >= 24px (WCAG 2.5.8) without growing
   the bar; tracking matches .lockup-name on the Maastokartat site */
.wordmark {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em;
  font-size: 1.25rem; line-height: 1; text-decoration: none; color: var(--header-fg);
  display: inline-block; padding-block: .25rem;
}
.site-footer .wordmark { color: var(--header-fg); }

.company-hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.company-hero h1 { max-width: 18ch; margin-bottom: 1.25rem; }

/* the apps section follows the hero directly, so it opens shallower than the
   default section gap */
.section-apps { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- apps: flagship showcase + compact rows ---------- */

/* the text column sets the card's height; the phone screenshot is cropped by
   the card's bottom edge on purpose */
.feature-card {
  margin-top: 2.5rem;
  display: grid; gap: 1.75rem;
  background: var(--brand-tint);
  border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-card);
  overflow: hidden; /* fallback for browsers without overflow: clip */
  overflow: clip;   /* crops the phone at the card edge, border-radius included */
}
.feature-head { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.5rem); }
/* 22.5% matches the corner radius of the Play Store icon shape */
.feature-head img { width: var(--app-icon); height: auto; border-radius: 22.5%; }
/* the app name is a wordmark, not a heading: same face, tracking and sizes as
   the app-site hero lockup (.lockup-hero .lockup-name) — keep the two in step */
.feature-head h3 {
  font-family: var(--font-body); letter-spacing: 0.02em;
  font-size: clamp(1.625rem, 4.2vw, 2.375rem); line-height: 1.05;
}
/* companion to the very-narrow icon step-down at the top of this file */
@media (max-width: 359.98px) { .feature-head h3 { font-size: 1.5rem; } }
/* no ch cap: the card's own max-width keeps the measure in range */
.feature-desc {
  font-size: clamp(1rem, .96rem + .3vw, 1.125rem); line-height: 1.6;
  color: var(--fg-soft); margin: 1.25rem 0 0; max-width: none;
}
/* the rating/downloads row reuses .proof/.stars from the shared site.css;
   row gap 1rem clears the Play badge's required clear space */
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.5rem; }

/* stacked below 760px: the phone sits under the text, centred, cut at the
   card's bottom edge; the fixed height sets how much of the screenshot shows */
.feature-shot { justify-self: center; width: min(17rem, 100%); height: clamp(21rem, 80vw, 24rem); }
@media (min-width: 760px) {
  .feature-card {
    grid-template-columns: 1fr clamp(12rem, 26vw, 15rem);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  /* out of flow so the phone's height cannot stretch the card */
  .feature-shot { position: relative; grid-column: 2; grid-row: 1; justify-self: stretch; width: auto; height: auto; }
  .feature-shot .phone { position: absolute; inset-inline: 0; top: -.5rem; }
}

.feature-more {
  color: var(--brand); text-decoration: none; font-weight: 600; font-size: .9375rem;
  display: inline-block; padding-block: .375rem;
}
.feature-more:hover { text-decoration: underline; }

/* compact row card for the other apps */
.product {
  margin-top: 1.5rem;
  display: grid; grid-template-columns: var(--app-icon) 1fr; gap: 1rem 1.25rem; align-items: center;
  border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  /* inline padding matches .feature-card so the two cards' edges line up */
  background: var(--card-bg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-card);
}
/* narrow: the text wrapper dissolves into the grid; wide restores it as a
   middle column */
.product > div { display: contents; }
/* direct child only — a bare `.product img` would also match the Play badge
   nested in the anchor and squash it into the icon's box */
.product > img { width: var(--app-icon); height: auto; border-radius: 22.5%; }
.product h3 { font-size: 1.25rem; }
.product p { font-size: .9375rem; color: var(--fg-soft); margin: 0; max-width: none; grid-column: 1 / -1; }
.product > .play-badge { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) {
  .product { grid-template-columns: var(--app-icon) 1fr auto; }
  .product > div { display: block; }
  .product h3 { margin-bottom: .3125rem; }
  /* pinned to the top so the icon does not drift as the description wraps;
     the nudge is the h3's half-leading */
  .product > img { align-self: start; margin-top: .1875rem; }
  .product > .play-badge { grid-column: 3; justify-self: end; }
}

/* the company footer's second column holds contact addresses; it reuses the
   shared footer grid slot */
.footer-contact { grid-area: support; }