/* Gerta Psachou Interiors — shared component styles.
 *
 * Lifted from Interior Studio, where every rule here is in production and has been checked against
 * the reference pages in brand/reference/. Paste into a <style> block in the page head, after the
 * Tailwind config script. Nothing here needs a build step.
 *
 * The values are measured from the client's website, not invented. Read BRANDING.md before
 * changing any of them.
 */

body { -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- letter-spacing
   Always use these. Never Tailwind's tracking-* utilities — the brand's tracking
   does not correspond to Tailwind's scale. */
.tr-08 { letter-spacing: 0.08em; }
.tr-10 { letter-spacing: 0.10em; }
.tr-25 { letter-spacing: 0.25em; }

.no-bar::-webkit-scrollbar { display: none; }
.no-bar { scrollbar-width: none; }

/* ---------------------------------------------------------------- scroll reveal
   Copied verbatim from the website. One easing curve throughout: cubic-bezier(.22,.61,.36,1). */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .63s cubic-bezier(.22,.61,.36,1), transform .63s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-img {
  clip-path: inset(0 0 14% 0);
  transition: opacity .63s ease, transform .63s cubic-bezier(.22,.61,.36,1),
              clip-path .77s cubic-bezier(.22,.61,.36,1);
}
.reveal-img.is-in { clip-path: inset(0 0 0 0); }
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; }

/* ---------------------------------------------------------------- buttons
   Outlined, square, and they invert on hover — the fill and the text swap.
   No lift, no scale, no shadow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 44px; border-radius: 0;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.22,.61,.36,1),
              color .3s cubic-bezier(.22,.61,.36,1),
              border-color .3s cubic-bezier(.22,.61,.36,1);
}
.btn-outline { border: 1px solid #52504D; color: #52504D; background: transparent; }
.btn-outline:hover:not(:disabled) { background: #52504D; color: #F9F6F0; }
.btn-solid   { border: 1px solid #4A4744; background: #4A4744; color: #F9F6F0; }
.btn-solid:hover:not(:disabled) { background: #1A1916; border-color: #1A1916; }
.btn-quiet   { border: 0; color: #9B9484; background: transparent; height: 34px; }
.btn-quiet:hover { color: #1A1916; }
.btn:disabled { opacity: .38; cursor: default; }

/* On desktop a button in a toolbar should not stretch; add w-auto px-[22px] where needed. */

/* ---------------------------------------------------------------- focus
   Visible, square, and only for keyboard users. */
.btn:focus-visible,
.card:focus-visible,
.view-tab:focus-visible,
input[type="file"]:focus-visible + .btn {
  outline: 1px solid #1A1916; outline-offset: 2px;
}
/* Headings are focused programmatically to announce a step change to a screen reader.
   They are not controls, so they take focus without drawing a box. */
[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- form fields
   Copied verbatim from the website's contact form. */
.field         { width: 100%; background: #F9F6F0; border: 0; color: #52504D;
                 font-size: 13px; padding: 10px 12px; outline: none; }
.field:focus   { box-shadow: inset 0 0 0 1px #9B9484; }
.field-label   { font-size: 12px; color: #52504D; display: block; margin-bottom: 8px; }
.field-invalid { box-shadow: inset 0 0 0 1px #B4574A; }
.field-msg     { font-size: 11px; line-height: 1.5; color: #B4574A; margin-top: 6px; }

/* ---------------------------------------------------------------- selectable card
   A grid tile that can be picked. Selection is a 1px inset rule and a dimmed image —
   never a colour flood. */
.card {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 0; cursor: pointer;
}
.card .thumb {
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 0 #1A1916;
  transition: box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.card .thumb img {
  display: block; width: 100%; object-fit: cover;
  transition: opacity .3s cubic-bezier(.22,.61,.36,1);
}
.card[aria-pressed="true"] .thumb     { box-shadow: inset 0 0 0 1px #1A1916; }
.card[aria-pressed="true"] .thumb img { opacity: .72; }
.card[aria-pressed="true"] .card-name { color: #1A1916; }

/* ---------------------------------------------------------------- tabs / filter chips
   An underline, not a pill. Square, quiet until active. */
.view-tab {
  background: none; border: 0; padding: 0 0 3px 0; cursor: pointer;
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: #9B9484;
  border-bottom: 1px solid transparent;
  transition: color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.view-tab:hover { color: #1A1916; }
.view-tab[aria-pressed="true"] { color: #1A1916; border-bottom-color: #1A1916; }

/* ---------------------------------------------------------------- progress
   The website's 2px brass loading bar. Reuse it for any indeterminate wait. */
.bar-track { height: 2px; background: #D5CFC6; }
.bar-fill  { height: 100%; width: 0; background: #AF976A;
             transition: width .4s cubic-bezier(.22,.61,.36,1); }

/* ---------------------------------------------------------------- label over an image
   A hairline dark outline so a pale label survives a pale photograph. Not a drop shadow. */
.img-label {
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  color: #D4C9B4; pointer-events: none;
  text-shadow:
     1px 0 0 rgba(26,25,22,.55), -1px 0 0 rgba(26,25,22,.55),
     0 1px 0 rgba(26,25,22,.55),  0 -1px 0 rgba(26,25,22,.55);
}

/* ---------------------------------------------------------------- reduced motion
   Every effect above is switched off here. This block is not optional. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important; animation: none !important;
  }
  .btn, .card .thumb, .card .thumb img, .view-tab { transition: none !important; }
  .bar-fill { transition: none !important; }
}