/* ============================================================
   XC EXCHANGE — CONTACT SURFACE
   Views/Contact/Index.cshtml, Views/Contact/EmailSentSuccessful.cshtml

   Additive over XC_Home_v4.css, which is loaded first and owns every
   token and the whole .btn system. Nothing here redefines either.
   It sits alongside two stylesheets already in the tree rather than
   repeating them:

     XC_Auth_v1.css     — .afield / .arow / .ahint and the
                          jquery.validate class contract
     XC_Company_v1.css  — .co-channels (the About page's channel
                          ledger, which is this page's email and
                          social block), and .ag-signup / .ag-sheet /
                          .ag-form / .ag-submit / .ag-done, which is
                          this page's message form and its receipt

   So the only thing this file owns is the part of Contact that exists
   nowhere else: the store picker and the branch record.

   MODE: Operate. Nobody arrives here to be persuaded. They want one
   of four things -- where a counter is, when it is open, what its
   number is, or a reply to a question -- and the surface is ranked in
   that order.

   WHAT THE LEGACY PAGE DID, AND WHY IT IS NOT KEPT:

   1. The branch strip was Bootstrap tabs (data-toggle="tab"), so
      three of the four branches were behind a click and behind
      jQuery. This shell loads neither. The picker is now a list of
      real in-page links that work with scripts blocked -- every
      branch is on the page and reachable -- which xc-contact_v1.js
      upgrades to a tab set when it runs.
   2. Tab ids were built with item.Name.Substring(0, 4). A branch
      whose name is shorter than four characters threw
      ArgumentOutOfRangeException and took the whole page with it --
      the page does not render at all against the current staging
      data. Ids are keyed off item.Id, which cannot fail.
   3. The two branch photographs were a fotorama gallery: a
      stylesheet, a script and a jQuery dependency, to show two
      images. They are two images.
   4. Three white cards on a grey strip per branch, each with its own
      padding, held one paragraph, one phone number and one table.
      This system separates with hairlines and does not use cards as
      scaffold, so the branch record is one ruled field.
   5. The open-hours table rendered seven blank rows for a branch with
      no OpenHour rows, because GetOpenHour returns an empty model
      rather than nothing. An unknown hour is now not drawn at all.
   ============================================================ */


/* ============================================================
   1. THE HEAD

   Same idiom as the document surfaces: the name, then the one amber
   rule, drawn on load rather than on scroll -- the title block is
   the first viewport and gating it on a script is how a blocked
   script turns a page blank.
   ============================================================ */
.ct {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.ct-head { padding: clamp(2.75rem, 5.5vw, 4.75rem) 0 clamp(1.75rem, 3vw, 2.5rem); }

.ct-title {
  font-size: clamp(2.05rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.034em;
  max-width: 24ch;
}

.ct-rule {
  display: block;
  height: 3px;
  width: min(210px, 60%);
  margin-top: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--accent-fill);
  transform-origin: left center;
  animation: ctRule 1.05s cubic-bezier(.16, 1, .3, 1) .15s both;
}
@keyframes ctRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ============================================================
   2. THE STORE PICKER

   A label, then the branch names on one baseline with the current
   one carrying a 2px brand underline. The strip's own hairline is
   the section rule, so the underline lands on it rather than
   floating above it -- hence the -1px on each tab.

   These are <a href="#branch"> in the markup. With xc-contact_v1.js
   blocked they are jump links down a page that shows every branch;
   with it running they are a tab set, and the script is what writes
   role="tab" and aria-selected.
   ============================================================ */
.ct-pick-lab {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: .9rem;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.ct-tab {
  display: block;
  margin-bottom: -1px;
  padding: .8rem 1.15rem .72rem;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--body);
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
/* the first name sits on the grid's left edge, like every other
   first item on this surface */
.ct-tabs > li:first-child .ct-tab { padding-left: 0; }

.ct-tab:hover { color: var(--ink); }
.ct-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r);
}
.ct-tab[aria-selected="true"],
.ct-tab.is-current {
  color: var(--brand);
  font-weight: 600;
  border-bottom-color: var(--brand);
}


/* ============================================================
   3. THE BRANCH RECORD

   Two columns: what you need to know on the left at a reading
   width, and where it is on the right at photographic width. The
   facts come first in the source order as well as in the layout,
   because on a phone the address and the opening hours are the
   errand and the map is the follow-up.
   ============================================================ */
.ct-panels { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.ct-branch {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6.4fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

/* THIS RULE IS NOT OPTIONAL.
   xc-contact_v1.js hides the branches that are not current with the
   hidden attribute, and [hidden] { display: none } lives in the
   BROWSER's stylesheet -- which any author declaration beats, whatever
   its specificity. So .ct-branch { display: grid } above quietly
   overrode it: every panel stayed on the page, stacked, and clicking a
   tab moved the underline and nothing else. Restating it here as an
   author rule, at higher specificity than the one that broke it, is
   what makes the picker actually pick. */
.ct-branch[hidden] { display: none; }

/* only reachable with the script blocked, where every branch is on the
   page at once and they need separating. Both sides have to be
   visible: with the script running the sibling selector still matches
   across the hidden panels, and the second or third branch would open
   with a stray rule and 60px of nothing above it. */
.ct-branch:not([hidden]) + .ct-branch:not([hidden]) {
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--line);
}

/* the anchor a picker link lands on has to clear the sticky
   masthead, or the branch it named is the one thing hidden */
.ct-branch { scroll-margin-top: 92px; }

/* a branch with no map and no photograph -- the facts take the whole
   field rather than leaving a column of nothing beside them */
.ct-branch.is-solo { grid-template-columns: minmax(0, 1fr); }

.ct-branch-n {
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* --- the facts ------------------------------------------- */
.ct-facts {
  margin-top: 1.4rem;
  display: grid;
}

.ct-fact {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .9rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.ct-fact:first-child { padding-top: 0; border-top: 0; }
.ct-fact:last-child { padding-bottom: 0; }

.ct-fact-ic {
  margin-top: .12rem;
  color: var(--brand);
}
.ct-fact-ic svg { display: block; width: 19px; height: 19px; }

/* an <address>, so the italic default has to go. Set exactly as
   .loc-addr sets the same four addresses on the home page: the unit
   or shop number in --ink on its own line, the rest in --body. */
.ct-addr {
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body);
}
.ct-addr b { color: var(--ink); font-weight: 600; }

/* the number is an action, so it is an object rather than a line of
   text: the measured face, at a size that can be read across a
   counter, and it goes brand on hover like every other link here */
.ct-tel {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: color .16s ease;
}
.ct-tel:hover,
.ct-tel:focus-visible { color: var(--brand); }
.ct-tel:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* --- opening hours --------------------------------------- */
/* A week is a table and this one is set as one: days down the left,
   figures right-aligned on tabular numerals so the colons stack.
   Today is marked twice over -- brand ink and a 2px amber rule in
   the left margin -- and carries aria-current="date", so the mark
   is not colour alone. */
.ct-hours {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ct-hours td {
  padding: .46rem 0;
  color: var(--body);
  font-weight: 500;
  line-height: 1.45;
}
.ct-hours tr + tr td { border-top: 1px solid var(--line); }
.ct-hours td + td {
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}
.ct-hours .is-closed {
  color: var(--muted);
  font-weight: 500;
}

.ct-hours tr[aria-current="date"] td { color: var(--brand); font-weight: 600; }
.ct-hours tr[aria-current="date"] td:first-child {
  position: relative;
  padding-left: .8rem;
}
.ct-hours tr[aria-current="date"] td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42rem;
  bottom: .42rem;
  width: 2px;
  background: var(--accent-fill);
}

/* --- the map and the photographs ------------------------- */
/* 10px, not --r: on this system a framed photograph is the one
   object that carries a larger radius, set by .reach-media and the
   branches strip on the home page. A map embed is a photograph. */
.ct-map {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 34px 64px -40px rgba(0, 10, 77, .55), 0 2px 6px rgba(0, 10, 77, .07);
}
.ct-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ct-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.ct-shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.ct-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   4. THE CHANNELS STRIP

   .co-channels does the work; this only places it against the
   photograph. .reach owns the frame and the ground, so a visitor
   who reaches the foot of Contact and the foot of About sees the
   same object in the same place.
   ============================================================ */
.ct-reach-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.5rem);
}

/* three channels is a short ledger, and a photograph given half the
   grid towers over it -- the frame is capped and pushed to the right
   edge so the two sides of the band are about the same height */
.ct-reach-media {
  max-width: 30rem;
  margin-left: auto;
}


/* ============================================================
   5. THE MESSAGE SHEET

   .ag-sheet and .ag-form carry it. Two things are added: the
   textarea's row of one, and the honeypot that the auth surface has
   no equivalent of.
   ============================================================ */
/* Subject runs the row on its own line at narrow widths but pairs
   with the email above 640px -- .arow already does that. The one
   thing .ag-form does not have is a field that must span it. */
.ag-form > .aspan { grid-column: 1 / -1; }


/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  /* the map stops being a column and becomes the thing under the
     facts -- at this width a 16/10 embed beside a reading column
     leaves the embed too small to pan */
  .ct-branch { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* and it flattens: at full grid width 16/10 is a 600px-tall map,
     which pushes the photographs and everything after them off the
     end of a tablet screen. 2/1 is still a map you can read. */
  .ct-map { aspect-ratio: 2 / 1; }
}

@media (max-width: 700px) {
  /* four names on one baseline do not fit, and a horizontal
     scroller would put a branch behind a gesture. The strip becomes
     a two-up field of cells, and the current one takes the left
     rule the account sidebar and the document rail already use. */
  .ct-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    border-bottom: 0;
    border-top: 1px solid var(--line);
  }
  .ct-tab {
    margin-bottom: 0;
    padding: .85rem 0 .85rem .8rem;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
  }
  .ct-tabs > li:first-child .ct-tab { padding-left: .8rem; }
  .ct-tab[aria-selected="true"],
  .ct-tab.is-current {
    border-bottom-color: var(--line);
    border-left-color: var(--brand);
  }

  .ct-reach-in { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  /* the photograph follows the ways of reaching us, as it does on
     the home page and on About */
  .ct-reach-media { order: 2; }
  .ct-reach-copy { order: 1; }
}

@media (max-width: 620px) {
  .ct-map { aspect-ratio: 4 / 3; }
  .ct-shots { grid-template-columns: minmax(0, 1fr); }
  .ct-fact { grid-template-columns: 18px minmax(0, 1fr); gap: .7rem; }
}


/* ============================================================
   7. REDUCED MOTION
   The global block in XC_Home_v4.css kills the animation, so any
   state that starts displaced has to be landed here by hand.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ct-rule { transform: none; }
}