/* ==========================================================================
   COF sections
   Per-page section layouts. Reference: canvas-a|b|c/*.dc.html at 1440px.
   ========================================================================== */

/* ------------------------------------------------------------- Shared --- */

/* A marked slot where the client still has to supply an image. Deliberately
   visible: a silently empty box in a review reads as finished. */
.cof-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
  height: 100%;
  padding: 24px;
  background: var(--cof-card);
  border: 1px dashed var(--cof-rule);
  border-radius: var(--cof-r-card);
  color: var(--cof-flag);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* A photograph that becomes an inline video when the play button is pressed. */
.cof-videofig { position: relative; }
.cof-videofig__poster,
.cof-videofig__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cof-videofig__video { background: var(--cof-espresso); }
.cof-videofig [hidden] { display: none; }

/* The circular play button over the still. */
.cof-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(51, 32, 18, 0.72);
  color: var(--cof-on-dark);
  transition: background 0.18s var(--cof-ease), transform 0.18s var(--cof-ease);
}
.cof-play:hover { background: rgba(51, 32, 18, 0.9); transform: translate(-50%, -50%) scale(1.06); }
.cof-play svg { margin-left: 4px; } /* optical centring of a triangle */

/* Prose pages (legal, Careers) are styled in prose.css, which the block editor
   canvas loads as well, so the client sees what the visitor will get. */

.cof-searchform { display: flex; align-items: flex-end; gap: 16px; max-width: 520px; }
.cof-searchform .cof-field { flex: 1 1 auto; }
.cof-searchform .cof-btn { flex: none; width: auto; }

.cof-card { display: flex; flex-direction: column; gap: 14px; }
.cof-card .cof-media img { aspect-ratio: 44 / 50; }

.cof-hours { list-style: none; }
.cof-address { font-style: normal; }

/* ==========================================================  HOME  ====== */

/* --------------------------------------------------------- 1.1 Hero --- */

.cof-hero { position: relative; height: 540px; overflow: hidden; }

.cof-hero__media { position: absolute; inset: 0; }
.cof-hero__media img,
.cof-hero__video { width: 100%; height: 100%; object-fit: cover; }
.cof-hero__video { position: absolute; inset: 0; }

/* The heading sits over photography, so it needs a scrim rather than luck. */
.cof-hero__scrim {
  position: absolute;
  inset: 0;
  /* The lightest stop used to sit at 46%, which is exactly where the centred
     heading lands: 2.5:1 on the current still and 1.7:1 over a light video frame.
     The band across the middle is now the darkest part, not the weakest. */
  background: linear-gradient(
    180deg,
    rgba(26, 17, 10, 0.42) 0%,
    rgba(26, 17, 10, 0.55) 38%,
    rgba(26, 17, 10, 0.55) 66%,
    rgba(26, 17, 10, 0.48) 100%
  );
}

.cof-hero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  height: 100%;
  padding-inline: var(--cof-gutter);
  text-align: center;
}
.cof-hero__heading { color: var(--cof-on-dark); }

.cof-hero__videonote {
  position: absolute;
  right: 34px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cof-on-dark);
}
/* 44px box, 16px icon: the same minimum the header controls use. Below 780px the
   text label is hidden and these circles are the only affordance left. */
.cof-hero__mute,
.cof-hero__playpause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 234, 220, 0.85);
  color: var(--cof-espresso);
}

@media (max-width: 780px) {
  .cof-hero { height: 460px; }
  .cof-hero__videonote { right: var(--cof-gutter); bottom: 18px; }
  .cof-hero__videonote span { display: none; }
}

/* The sentence beside the controls is a statement of fact, and for a visitor who
   has asked for reduced motion it is not a true one: hero-video.js leaves the
   video on its poster frame for them. The buttons stay; the claim goes. */
@media (prefers-reduced-motion: reduce) {
  .cof-hero__videonote > span { display: none; }
}

/* --------------------------------------------- 1.2 3-in-1 concept --- */

.cof-concept { padding-block: 104px 116px; }
.cof-concept__head { margin-bottom: 54px; }
.cof-concept__head .cof-h2 { max-width: 22ch; }
.cof-concept__cards { gap: 30px; }

.cof-card-concept {
  display: flex;
  flex-direction: column;
  background: var(--cof-card);
  border-radius: var(--cof-r-card);
  overflow: hidden;
  color: var(--cof-ink);
}
.cof-card-concept:hover { color: var(--cof-ink); }
/* 9:10, the proportion the concept cards have in the design at 1440. */
.cof-card-concept__media { aspect-ratio: 9 / 10; overflow: hidden; }
.cof-card-concept__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--cof-ease); }
.cof-card-concept:hover .cof-card-concept__media img { transform: scale(1.03); }

.cof-card-concept__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: 20px 28px 24px;
}
.cof-card-concept__label { display: flex; flex-direction: column; gap: 3px; }
.cof-card-concept__sub { font-size: 12px; letter-spacing: 0.09em; color: var(--cof-muted); }

@media (max-width: 780px) {
  .cof-concept { padding-block: var(--cof-section); }
  .cof-concept__head { margin-bottom: 36px; }
}

/* ------------------------------------------- 1.3 Interior feature --- */

.cof-interior { padding-block: 112px; }
.cof-interior__media { position: relative; }
.cof-interior__media img { width: 100%; height: 690px; object-fit: cover; }
.cof-interior__body .cof-h2 { max-width: 14ch; }
.cof-interior__copy { gap: 22px; max-width: 47ch; }
.cof-interior .cof-btn { align-self: flex-start; margin-top: 12px; }

@media (max-width: 980px) {
  .cof-interior { padding-block: var(--cof-section); }
  .cof-interior__media img { height: 420px; }
  .cof-interior__body .cof-h2 { max-width: none; }
}

/* -------------------------------------------- 1.4 COFamily teaser --- */

.cof-family { padding-block: 0 112px; }
/* Proportional, not a fixed 570px track. A fixed track left the panel 201px of
   content between 1101 and 1180px, which wrapped the heading and made the button
   two lines tall. */
.cof-family__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 28px; }
.cof-family__media img { width: 100%; height: 620px; object-fit: cover; object-position: center 22%; }

.cof-family__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 64px 72px;
  background: var(--cof-espresso);
  border-radius: var(--cof-r-card);
  color: var(--cof-on-dark);
}
.cof-family__text { font-size: 17px; line-height: 1.7; color: var(--cof-on-dark-soft); max-width: 34ch; }
.cof-family__panel .cof-btn { align-self: flex-start; margin-top: 12px; }

@media (max-width: 1200px) {
  .cof-family__grid { grid-template-columns: minmax(0, 1fr); }
  .cof-family__media img { height: 420px; }
  .cof-family__panel { padding: 44px var(--cof-gutter); }
}
@media (max-width: 980px) {
  .cof-family { padding-block: 0 var(--cof-section); }
}

/* ------------------------------------------------- 1.5 COF Merch --- */

.cof-merch { padding-block: 0 116px; }
.cof-merch__media {
  width: 100%;
  background: var(--cof-card);
  border-radius: var(--cof-r-card);
  overflow: hidden;
}
/* `contain`, not `cover`: cropping this shot cuts the lid off the tumbler and the
   scripture line off the journal, which are the parts carrying the branding. */
.cof-merch__media img { width: 100%; height: 700px; object-fit: contain; }
/* 62px at 1440, its own size in the design rather than the h1 ramp's 72px. */
.cof-merch__heading { font-size: clamp(38px, 4.3vw, 62px); font-weight: 500; letter-spacing: 0.01em; }

@media (max-width: 780px) {
  .cof-merch { padding-block: 0 var(--cof-section); }
  .cof-merch__media img { height: 420px; }
}