/* contact.small.css — 07 / Contact, below the desktop composition
 *
 * REWRITTEN 2026-08-06 for plan 9a (M21). The previous contents were a delta for
 * the old composition — headshot chip, meta block, two-line phone/email list —
 * and most of its selectors (.contact__id, .contact__plate, .contact__direct)
 * no longer exist in the markup at all.
 *
 * THE BREAKPOINT IS 768px — THE 960px EXCEPTION IS GONE (2026-08-08).

 * M21 put it at 960 because "below ~950px wide the desktop composition runs out
 * of lane and the name/location/role block can be clipped". Both causes are now
 * removed by CONTACT-DESKTOP.md: the grid tracks are minmax(0, …) so the columns
 * can give way, and sizeFigure() has a width ceiling that holds the copy lane at
 * MIN_LANE. The spec states the consequence — "No breakpoints. One layout from
 * 768px up" — and its §6 verifies 924 x 540 as a DESKTOP frame.
 *
 * THE BREAKPOINT LIVES IN THREE PLACES AND THEY MUST AGREE:
 *   1. this media query
 *   2. contact.js's matchMedia
 *   3. the <source media> on the <picture> in section-contact.php
 *
 * The third art-directs the portrait, and moving only the first two was tried
 * and measured: at 924 the desktop composition rendered with the MOBILE portrait
 * (ratio 0.9565 against the desktop asset's 0.7045), the figure came out
 * 319x334 instead of 235x334, and the copy lane fell to 196px — below MIN_LANE.
 * All three move together or none do.
 */


/* =========================================================================
   Mobile composition — below 768px
   ========================================================================= */

@media (max-width: 767.98px) {

  /* 100vh is dropped: the section is as tall as its content. Keeping it would
     cap the section below the form and clip the submit button. */
  .contact {
    min-height: 0;
    height: auto;
    padding: 36px 24px 48px;
    container-type: normal;   /* the cqw type scale is desktop-only */
  }

  /* The watermark stacks BEHIND the type and is partially covered by it,
     bleeding off both edges — it is not the desktop's full-width band. */
  /* 30vw only wins below ~373px. "VISION" sets 3.63x its font-size and starts
     42px left of the frame, so a flat 112px was 407px wide and reached 365 —
     past a 360px Android and well past a 320px SE, scrolling the page sideways.
     Above 373 the size is still exactly 112px. */
  .contact__watermark {
    font-size: min(112px, 30vw);
    left: -42px;
    top: 20px;
    color: rgba(18, 28, 42, .11);
  }

  .contact__grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }
  .contact__left { display: flex; flex-direction: column; gap: 34px; margin-bottom: 0; }

  .contact__head { position: relative; padding-top: 6px; }

  /* 30px, breaking after "Got a". 40px overflows a 390px frame, and
     VISION/HEADACHE? is nowrap — so the size is what has to give.

     The 7.8vw arm continues that logic below 385px, where even 30px does not
     fit: the highlighted span measured 323px against a 272px content box at 320
     wide. Same reasoning, same rule, one step further down. */
  .contact__h2 { font-size: min(30px, 7.8vw); margin-top: 18px; }

  /* THE DESKTOP COMPOSITION, ON REQUEST 2026-08-13. The portrait floats left and
     the copy wraps around it, pointing across at the contact details — the same
     arrangement the section has above 768, not a separate mobile design.

     WHAT THIS REPLACES, so it is not restored by accident: M21 stacked it
     header → rows → portrait → form, with the portrait a full-bleed 86vw band
     BELOW the rows, because the mobile cutout pointed UP at them. Both halves of
     that are gone — section-contact.php now serves the across-pointing cutout at
     every width, and the float is what puts the details where it points. */
  /* THE SAME GRID AS EVERY OTHER WIDTH — only the tracks tighten. This band used
     to run its own flex layout with the meta block forced onto a full-width line
     of its own, which read as a third row under the portrait rather than part of
     the details. Zsolt, 2026-08-19: it is one left/right split at every size, so
     the layout is inherited and only the numbers change here. */
  .contact__body {
    grid-template-columns: 42% minmax(0, 1fr);
    column-gap: 14px;
    padding-top: 0;
  }
  /* No override: the base rule's display:contents has to hold here too, or the
     lede and the rows place as one block and the meta cannot follow them into
     column 2. */

  .contact__lede { font-size: 19px; margin-top: 0; }

  /* SIZED IN CSS, NOT BY contact.js. The script stops at 1280 — its job is to
     grow the portrait until it reaches the floor of a full-viewport section, and
     below 1280 the section is content-driven so there is no floor to reach.

     A PERCENTAGE, because what matters here is the split between the portrait
     and the copy beside it, and that is a ratio rather than a length. 42% leaves
     roughly 58% for the rows at every width, so the composition holds from 767
     down to 320 without a second breakpoint. height:auto with no aspect-ratio:
     one asset now, so the intrinsic 567x736 is correct by definition.

     max-width clears the desktop band's calc(100% - 340px), which reserves a
     lane this narrow frame does not have and would collapse the portrait to
     nothing below about 520px. */
  /* No rule at all: the base grid places and grounds it, and the 42% track above
     is the width. What was here duplicated both. */

  /* ROWS STACK WITHIN THEMSELVES, which is what makes this work at 320px. The
     label takes its own line and the value and its CALL/WRITE share the next —
     Zsolt's instruction, and the only way the row fits beside a floated portrait
     on a phone: a row needs ~300px on one line and there are ~190px here.

     width:100% is what forces the break. The base rule already has flex-wrap, so
     nothing else is needed; the value keeps flex:1 and pushes the action right.
     min-height is the 56px tap target and survives the change. */
  .crow {
    min-height: 56px;
    padding: 14px 0;
    max-width: none;
  }
  .crow__k { width: 100%; }

  .contact__meta { margin-top: 18px; }

  /* THE LABEL COLUMN IS WHAT MAKES THE PAIRS FIT column 2 here. At 92px, the
     label plus "Zsolt Földesi" needs ~183px and the lane is 167px at a 360px
     viewport, so every pair wrapped — which is why this block used to be given a
     full-width line of its own. 68px is the widest label ("LOCATION" /
     "HELYSZÍN", 8 characters at 10px with .16em tracking) plus a hair, and it
     brings the pair to ~159px. */
  .cmeta__k { width: 68px; }
}


/* =========================================================================
   Form — small screens
   ========================================================================= */

@media (max-width: 767.98px) {

  .cform__stack { gap: 26px; }

  /* 16px is not a style choice: below it, iOS zooms the page on focus and the
     visitor is left scrolled sideways mid-form. */
  .cform__input,
  .cform-wrap .forminator-input,
  .cform-wrap .forminator-textarea { font-size: 16px; }

  /* Full-width, 56px — a real tap target rather than a desktop button. */
  .cform__submit,
  .cform-wrap .forminator-button-submit {
    width: 100%;
    min-height: 56px;
    padding: 18px 24px;
  }
  .cform-wrap .contact .forminator-row { gap: 26px; }
}

@media (hover: none) {
  /* No hover on touch, so the row's arrow must not depend on it. */
  .crow:hover .crow__a { transform: none; }
}