/* ============================================================
   BETH ANDERSON — contact.css
   Loaded ONLY by contact.html, AFTER main.css.
   Four small things the design system doesn't already cover:
     1. .visually-hidden — hides the Netlify spam-trap ("honeypot") field
        from sight while keeping it in the form for bots to find.
     2. .contact-block  — hairline-separated detail blocks
        (email / representation / socials) in the left column.
     3. .contact-email  — the large serif mailto link.
     4. .contact-form   — the bordered panel the form sits in.
   Everything else on this page uses main.css. Do not add page
   styles here that belong in the design system.
   ============================================================ */

/* 1. Screen-reader-only (honeypot field) --------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 2. Contact detail blocks ---------------------------------- */
.stack > .contact-block {
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.contact-block > * + * {
  margin-top: 0.7rem;
}

/* 3. Big serif email link ------------------------------------ */
.contact-email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--rose);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: 0.28em;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}

.contact-email:hover {
  color: var(--rose-deep);
  text-decoration-color: currentColor;
}

/* Social list reuses .footer-social, but as icons instead of words */
/* Same reasoning as .footer-social in main.css: the links are 2.75rem touch
   targets, so the gap only has to make up the remaining daylight (0.4rem +
   1.3rem of internal padding = the old 1.7rem between icons). */
.contact-social {
  flex-wrap: wrap;
  gap: 0.4rem;
}

.contact-social a {
  display: inline-flex;
  padding: 0; /* size comes from .footer-social a */
}

.contact-social svg {
  width: 1.45rem;
  height: 1.45rem;
  transition: color 0.2s, transform 0.3s var(--ease);
}

.contact-social a:hover svg {
  color: var(--rose);
  transform: translateY(-2px);
}

/* The form heading uses the italic display style Beth loves */
.contact-form h2 {
  font-style: italic;
}

/* 4. Form panel ---------------------------------------------- */
.contact-form {
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  background: var(--bone-2);
}

.contact-form h2 {
  margin-bottom: 1.6rem;
}

.form-note {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 5. Photo at the foot of the contact column ------------------
   Deliberately understated: narrow, low on the page, and carrying the same
   offset rose frame used elsewhere on the site. It fills the space the form
   leaves beside it without pulling attention off the email address. */
.contact-photo {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 19rem;
  /* Nudged in from the left edge at Beth's request, so it reads as a photo
     set into the page rather than another item lined up with the email
     address and the eyebrow labels above it. Scales down on narrow screens,
     where a deep indent would just look like a mistake. */
  margin-inline-start: clamp(1rem, 4vw, 3.5rem);
}

.contact-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* she sits just above centre in the frame */
  object-position: center 32%;
}

/* The graduation photo is TABLET ONLY — hidden by default so it can never turn
   up on phones (where the pink dress polaroid is in the hero instead) or on
   desktop, even if this stylesheet is ever served stale against new html. */
.contact-photo__pair {
  display: none;
}

/* ✏️ EDIT: its own focal point. The three of them are standing full length, so
   the 4:5 crop has to keep their shoes in frame. The `center 32%` shared by
   .contact-photo img is tuned for the pink dress and would cut this one within
   ~16px of their feet; 55% slides the crop window down for ~87px of clearance,
   at the cost of the very top of the archway — the carved inscription still
   reads. The two-class selector is deliberate: it has to outrank
   `.contact-photo img` above, which a single class would not. */
.contact-photo .contact-photo__pair {
  object-position: center 55%;
}

/* TABLETS: the two photos sit side by side inside the ONE rose frame, so the
   pair still reads as a single block — the same arrangement .framed-pair uses
   on the home page. Its rules are repeated here rather than shared, because
   putting that class in the markup would make it a pair at every width.
   The 4:5 crop and object-fit come from .contact-photo img above, which is
   what keeps the two the same size despite different source dimensions. */
@media (min-width: 601px) and (max-width: 900px) {
  .contact-photo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.6rem, 1.4vw, 1rem);
    /* two need more room than one, and the indent only ever made sense for a
       lone photo set into the column. Centred rather than flush left: at 34rem
       inside a 707px column the pair otherwise sits hard against the left edge
       with a wide gap beside it. */
    max-width: 34rem;
    margin-inline: auto;
  }

  .contact-photo__pair {
    display: block;
  }
}

/* 6. Hero: headline and lede on the left, polaroid on the right --------- */
.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

/* The white border is baked into the photo, so this only adds the tilt and a
   soft shadow — enough to read as a snapshot lying on the page.
   The tilt goes on the IMAGE, not the figure: .reveal.is-visible sets
   transform: none when an element fades in, and would cancel it otherwise. */
.polaroid {
  width: clamp(9rem, 20vw, 14rem);
}

.polaroid img {
  width: 100%;
  transform: rotate(-3deg);
  box-shadow: 0 14px 34px rgba(42, 30, 33, 0.18);
}

/* TABLETS KEEP THE TWO-COLUMN HERO so the polaroid sits in the top-right
   corner (Beth's call). It used to stack at 780px, which put an iPad in
   portrait (768) into the phone layout with the photo dropped below the
   text. The stacking point is now 600px, so only phones stack.
   `align-items: start` overrides the desktop centring — she asked for the
   TOP right corner, not centred on the paragraph beside it. The text column
   narrows to make room; that is the intended trade. */
@media (min-width: 601px) and (max-width: 900px) {
  .contact-hero {
    align-items: start;
  }
}

/* The second hero polaroid exists for phones only — hidden by default so it
   can never appear on the wider layouts, where the hero is two columns and
   only one card fits beside the headline. */
.polaroid--phone {
  display: none;
}

/* PHONES: the headline spans the full width and the two polaroids sit side by
   side beneath it (Beth's layout). The pink dress photo that used to close the
   details column further down is hidden here — its polaroid is up in the hero
   instead, so the page isn't showing the same dress twice. */
@media (max-width: 600px) {
  .contact-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the text block spans both columns; the two figures take one each */
  .contact-hero > .reveal:first-child {
    grid-column: 1 / -1;
  }

  .polaroid--phone {
    display: block;
  }

  /* fill the column so the pair reads as a matched set rather than two
     odd-sized snapshots */
  .contact-hero .polaroid {
    width: 100%;
    margin-top: 2rem;
  }

  /* tilted away from each other, the same trick the row at the foot of the
     form uses, so the pair reads as arranged rather than scattered */
  .contact-hero .polaroid--phone img {
    transform: rotate(3deg);
  }

  .contact-photo {
    display: none;
  }
}

/* 6b. The row of polaroids closing the form column ----------------------
   The form is shorter than the details column beside it, which left a band
   of empty page above the footer. These fill it.

   .split--offset sets align-items: start, so each column is only as tall as
   its content — margin-top: auto would have nothing to push against. This
   column alone stretches to the full row height and lays its children out as
   a flex column, so the row sits on the bottom edge. Nothing above it moves,
   and the section keeps the height the details column already gave it. */
.contact-form-col {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.polaroid-row {
  margin-top: auto;
  padding-top: clamp(1.2rem, 3vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

/* Sized to the widest three that still fit the column with margin to spare
   at every desktop width — at 1280 that is 160px each in a 554px column.
   Going bigger makes them wrap, which is why the gap is tighter than it
   looks like it needs to be. flex-wrap is the safety net if a fourth is
   ever added. */
.polaroid-row .polaroid {
  width: clamp(6rem, 12.5vw, 10rem);
}

/* Tilted symmetrically: the outer two splay apart by equal amounts and the
   middle one sits square, so the row reads as arranged rather than scattered. */
.polaroid-row .polaroid img { transform: none; }
.polaroid-row .polaroid:first-child img { transform: rotate(-3deg); }
.polaroid-row .polaroid:last-child  img { transform: rotate(3deg); }

/* Stacked, the column is no longer holding a gap open, so the row just
   follows the form with ordinary spacing. */
@media (max-width: 900px) {
  .polaroid-row {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-top: 0;
    justify-content: start;
  }
}

/* TABLETS: the row gets much bigger cards, and centred.
   The base size above is capped by the DESKTOP form column, which is only
   ~554px wide — but once the layout stacks below 901px this row has the whole
   container to itself (707px at 768px), so those cards were sitting far
   smaller than they needed to. 26vw keeps three plus their gaps comfortably
   inside the container across the whole band: 156px each at 601px where 178
   would fit, 200 at 768 where 227 fits, 234 at 900 where 266 fits.
   **If a fourth card is ever added, this has to come back down** — three is
   what the arithmetic above assumes.
   This block must stay AFTER the `max-width: 900px` one above, which sets
   `justify-content: start`; same specificity, so source order decides. */
@media (min-width: 601px) and (max-width: 900px) {
  .polaroid-row {
    justify-content: center;
  }

  .polaroid-row .polaroid {
    width: clamp(9rem, 26vw, 16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid img,
  .polaroid-row .polaroid img { transform: none; }
}

/* 7. Close the gap under the hero ------------------------------
   With the old "Bookings & Collaborations" block gone, the contact details
   were left sitting a long way down the page. Trimming the hero's bottom
   padding and the section's top padding pulls the email address up into
   that space. */
.page-hero {
  padding-bottom: clamp(1rem, 2vw, 1.8rem);
}

.page-hero + .section {
  padding-top: clamp(1.5rem, 3vw, 2.6rem);
}