/* Three Fours Ranch — Framed card + ribbon
   ------------------------------------------------------------------
   A reusable, page-agnostic component. Load it AFTER styles.css and
   BEFORE the page sheet, so a page can still override a token.

   The look: a photo held inside a mat, with a gold hairline rule
   floating off the photo edge, and the card's title set as a ribbon
   band across the lower third of the image.

   Everything is driven by custom properties, so a page can retune the
   frame without rewriting rules. See docs/framed-card.md for markup.
   ------------------------------------------------------------------ */

.framed {
  /* mat width: the gap between the photo and the hairline rule */
  --framed-gap: 14px;
  /* the hairline itself */
  --framed-rule: rgba(168, 133, 63, 0.55);
  --framed-rule-hover: var(--gold);
  /* mat fill; transparent lets the section background show through */
  --framed-mat: transparent;
  /* the fine keyline drawn just inside the photo */
  --framed-keyline: rgba(248, 242, 238, 0.5);
  --framed-ratio: 4 / 5;

  position: relative;
  display: block;
  padding: var(--framed-gap);
  background: var(--framed-mat);
  min-width: 0;
}

/* The floating hairline rule. Sits on the outer edge of the mat, so it
   reads as a frame set back from the picture rather than a card border. */
.framed::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--framed-rule);
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.5s ease;
}

/* ---------- Corner ticks (opt in with .framed--corners) ----------
   Four 1px L-brackets sitting just outside the rule. This is the
   engraved-invitation detail; keep it for feature images only. */
.framed--corners::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  z-index: 3;
  background-image:
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule)),
    linear-gradient(var(--framed-rule), var(--framed-rule));
  background-repeat: no-repeat;
  background-size:
    16px 1px, 1px 16px,
    16px 1px, 1px 16px,
    16px 1px, 1px 16px,
    16px 1px, 1px 16px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* ---------- The picture ---------- */
.framed-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--framed-ratio);
  background: var(--blush);
  min-width: 0;
}

.framed-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fine keyline inside the photo. Paired light-over-dark so it stays
   visible on a bright sky and on a dusk exterior alike. */
.framed--keyline .framed-media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--framed-keyline);
  box-shadow: 0 0 0 1px rgba(43, 33, 36, 0.14);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Ratio modifiers ---------- */
.framed--tall   { --framed-ratio: 4 / 5; }
.framed--square { --framed-ratio: 1 / 1; }
.framed--wide   { --framed-ratio: 3 / 2; }
.framed--pano   { --framed-ratio: 21 / 9; }

/* ---------- Tone modifiers ---------- */
.framed--ink {
  --framed-rule: rgba(231, 198, 188, 0.45);
  --framed-rule-hover: var(--rose);
}
.framed--quiet {
  --framed-rule: var(--border);
  --framed-rule-hover: var(--rose-muted);
}

/* ---------- The ribbon ----------
   A band across the lower portion of the photo carrying the title.
   The element itself can be an h2/h3/figcaption/span: it is real text,
   never an image, and it keeps its heading semantics. */
.framed-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  z-index: 4;
  margin: 0;
  padding: 13px 16px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--ink);
  /* 0.92 alpha keeps ink text above 12:1 even over a black photo.
     Do not take this below 0.85. */
  background: rgba(248, 242, 238, 0.92);
  border-top: 1px solid rgba(168, 133, 63, 0.5);
  border-bottom: 1px solid rgba(168, 133, 63, 0.5);
  /* keeps the band's edge readable where the photo behind it is pale */
  box-shadow: 0 8px 26px rgba(43, 33, 36, 0.16);
  transition: background 0.45s ease, color 0.45s ease, transform 0.45s ease;
}

/* Dark ribbon for pale photos: cream on ink, still AA over white. */
.framed-ribbon--ink {
  color: var(--cream);
  background: rgba(43, 33, 36, 0.88);
  border-top-color: rgba(212, 173, 99, 0.6);
  border-bottom-color: rgba(212, 173, 99, 0.6);
}

/* Ribbon that runs out across the mat and over the frame rule, the way
   a real ribbon crosses a mount. */
.framed-ribbon--full {
  left: calc(-1 * var(--framed-gap));
  right: calc(-1 * var(--framed-gap));
}

/* ---------- Card wrapper ---------- */
.framed-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.framed-card:hover { color: inherit; }

.framed-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}

.framed-card-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Hover and focus polish ----------
   Driven from the card (or the frame itself when used standalone), so
   a keyboard user gets the same treatment via :focus-within. */
.framed-card:hover .framed-media img,
.framed-card:focus-within .framed-media img,
.framed:hover .framed-media img {
  transform: scale(1.05);
}

.framed-card:hover .framed::before,
.framed-card:focus-within .framed::before,
.framed:hover::before {
  border-color: var(--framed-rule-hover);
}

.framed-card:hover .framed-ribbon,
.framed-card:focus-within .framed-ribbon {
  background: rgba(248, 242, 238, 0.97);
  color: var(--maroon);
  transform: translateY(-3px);
}

.framed-card:hover .framed-ribbon--ink,
.framed-card:focus-within .framed-ribbon--ink {
  background: rgba(43, 33, 36, 0.94);
  color: var(--rose);
}

@media (prefers-reduced-motion: reduce) {
  .framed-media img,
  .framed-ribbon,
  .framed::before {
    transition: none;
  }
  .framed-card:hover .framed-media img,
  .framed-card:focus-within .framed-media img,
  .framed:hover .framed-media img { transform: none; }
  .framed-card:hover .framed-ribbon,
  .framed-card:focus-within .framed-ribbon { transform: none; }
}

/* ---------- Caption under a frame ---------- */
.framed-caption {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- The 444 ornament ----------
   Echoes the rule-and-numerals divider in the brand lockup. Decorative,
   so mark it aria-hidden in the markup. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold-deep);
}

.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 62px);
  background: linear-gradient(to right, rgba(168, 133, 63, 0), var(--gold), rgba(168, 133, 63, 0));
}

.ornament span {
  font-family: var(--brand-serif);
  font-size: 12.5px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1;
}

.ornament--sm span { font-size: 10.5px; letter-spacing: 0.36em; text-indent: 0.36em; }
.ornament--sm::before,
.ornament--sm::after { width: clamp(18px, 4vw, 34px); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .framed { --framed-gap: 10px; }
  .framed--corners::after { inset: -5px; background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px; }
  .framed--keyline .framed-media::after { inset: 7px; }
  .framed-ribbon {
    bottom: 9%;
    padding: 11px 12px;
    font-size: 16px;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
}

@media (max-width: 380px) {
  .framed-ribbon { font-size: 15px; letter-spacing: 0.13em; text-indent: 0.13em; }
}