/* ==========================================================================
   COF inner pages
   Café and COFocus. Reference: canvas-a/Cafe.dc.html, canvas-a/COFocus.dc.html.
   base.css holds the system, sections.css holds the Home page.
   ========================================================================== */

/* -------------------------------------------- Page hero, text over image --- */

.cof-pagehero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.cof-pagehero__media { position: absolute; inset: 0; }
.cof-pagehero__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * The copy sits on the left third, so the scrim is heaviest there and has almost
 * cleared by the right edge. A flat overlay would dull the whole photograph to
 * protect text that only occupies part of it.
 */
.cof-pagehero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(26, 17, 10, 0.86) 0%,
    rgba(26, 17, 10, 0.66) 34%,
    rgba(26, 17, 10, 0.22) 62%,
    rgba(26, 17, 10, 0.05) 80%
  );
}

.cof-pagehero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  color: var(--cof-on-dark);
}
.cof-pagehero__body > * { max-width: 620px; }
.cof-pagehero__sub { font-family: var(--cof-serif); font-size: clamp(22px, 2.1vw, 30px); }
.cof-pagehero__copy { display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.62; max-width: 46ch; }

@media (max-width: 780px) {
  .cof-pagehero { min-height: 520px; }
  /* On a phone the copy sits over the middle of the photograph, not its left. */
  .cof-pagehero__scrim {
    background: linear-gradient(180deg, rgba(26,17,10,0.5) 0%, rgba(26,17,10,0.66) 45%, rgba(26,17,10,0.72) 100%);
  }
}

/* ------------------------------------------------ Feature / benefit rows --- */

.cof-feature { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-inline: 40px; text-align: center; }
.cof-feature--sm { gap: 16px; padding-inline: 22px; }

.cof-feature__title { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; }
.cof-feature__title--serif { font-family: var(--cof-serif); font-size: 20px; font-weight: 400; letter-spacing: 0.09em; }
.cof-feature__text { font-size: 14px; line-height: 1.7; color: var(--cof-body); max-width: 30ch; }
.cof-feature--sm .cof-feature__text { font-size: 13px; }

.cof-benefits { padding-block: 62px; }
.cof-features { padding-block: 58px; }

@media (max-width: 1024px) {
  /* Five across becomes three, so the divider on the first of the second row goes. */
  .cof-features__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .cof-features__row > *:nth-child(4) { border-left: 0; }
}
@media (max-width: 780px) {
  .cof-feature, .cof-feature--sm { padding-inline: 0; }
  .cof-benefits, .cof-features { padding-block: var(--cof-section); }
  /*
   * Explicit, because the three-column rule above is the same specificity and
   * comes first: without this the five features stay three-across at 375px, at
   * 91px per column.
   */
  .cof-features__row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .cof-features__row > * { border-left: 0; }
  .cof-features__row > * + * { border-top: 1px solid var(--cof-hairline); padding-top: 32px; }
}

/* ------------------------------------------------------- Menu columns --- */

.cof-menu { padding-block: 76px 88px; }
.cof-menu__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px; }

.cof-menucol { display: flex; flex-direction: column; gap: 20px; }
.cof-menucol__title { font-size: clamp(20px, 1.9vw, 26px); }
/* 283 x 330 in the design at 1440: portrait, not square. */
.cof-menucol__media { aspect-ratio: 283 / 330; border-radius: var(--cof-r-input); overflow: hidden; }
.cof-menucol__media img { width: 100%; height: 100%; object-fit: cover; }

.cof-menucol__list { display: flex; flex-direction: column; gap: 9px; list-style: none; font-size: 15px; color: var(--cof-body); }
.cof-menucol__list li { display: flex; justify-content: space-between; gap: 12px; }
.cof-menucol__price { color: var(--cof-ink); }
.cof-menucol__empty { font-size: 13px; font-style: italic; }

/*
 * The MENU pill floats in the gap between the second and third columns, level
 * with the middle of the image band. It is anchored to the grid, not the section,
 * so changing the section padding cannot drag it off the images.
 */
.cof-menu__pill {
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translate(-50%, -50%);
  padding: 15px 28px;
  background: var(--cof-espresso);
  color: var(--cof-on-dark);
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cof-menu__pill:hover { background: var(--cof-ink); color: var(--cof-on-dark); }

/*
 * With no destination set yet the pill renders as a span rather than a link. It
 * keeps the designed appearance on purpose: the moment the client supplies the
 * URL it becomes a real link with no visual change at all. The unset state is
 * tracked in the build plan, not signalled on the page.
 */
span.cof-menu__pill { cursor: default; }

@media (max-width: 1024px) {
  .cof-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  /* Two columns leaves no middle gap to float in, so it becomes a normal button. */
  .cof-menu__pill { position: static; transform: none; grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 560px) {
  .cof-menu__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- Location --- */

.cof-location { padding-block: 0 88px; }
.cof-location__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
.cof-location__map { min-height: 380px; border-radius: var(--cof-r-card) 0 0 var(--cof-r-card); overflow: hidden; }
.cof-location__map img,
.cof-location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; object-fit: cover; display: block; }

.cof-location__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 56px 62px;
  background: var(--cof-espresso);
  border-radius: 0 var(--cof-r-card) var(--cof-r-card) 0;
  color: var(--cof-on-dark-soft);
}
/* Uppercased here rather than in PHP: strtoupper() is byte-based and turns
   "Köln" into "KöLN", and CSS keeps the underlying text readable to a screen
   reader and to anyone copying the address. */
.cof-location__address {
  font-family: var(--cof-sans);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cof-gold);
}
.cof-location__line { font-size: 16px; font-style: italic; color: var(--cof-muted-dark); }
.cof-location__hours { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.cof-location__hours-label { font-family: var(--cof-sans); font-size: 16px; font-weight: 600; color: var(--cof-on-dark-soft); }
.cof-location__hours ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 900px) {
  .cof-location__grid { grid-template-columns: minmax(0, 1fr); }
  .cof-location__map { border-radius: var(--cof-r-card) var(--cof-r-card) 0 0; }
  .cof-location__panel { border-radius: 0 0 var(--cof-r-card) var(--cof-r-card); padding: 40px var(--cof-gutter); }
}

/* -------------------------------------------------------- COFocus slots --- */

.cof-slots { padding-block: 80px 88px; }
.cof-slots__grid { gap: 26px; width: 100%; }

.cof-slot { display: flex; flex-direction: column; background: var(--cof-card); border-radius: var(--cof-r-card); overflow: hidden; color: var(--cof-ink); text-align: left; }
a.cof-slot:hover { color: var(--cof-ink); }
a.cof-slot:hover .cof-slot__media img { transform: scale(1.03); }

.cof-slot__head { padding: 17px 16px; background: var(--cof-espresso); color: var(--cof-on-dark); font-size: 16px; font-weight: 400; letter-spacing: 0.13em; text-align: center; }
.cof-slot__media { aspect-ratio: 14 / 10; overflow: hidden; }
.cof-slot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--cof-ease); }

.cof-slot__foot { display: flex; align-items: center; gap: 18px; padding: 24px 26px; }
.cof-slot__labels { display: flex; flex-direction: column; gap: 5px; }
.cof-slot__inclusion { font-size: 14px; font-weight: 500; letter-spacing: 0.09em; line-height: 1.45; max-width: 22ch; }
.cof-slot__price { font-size: 13px; color: var(--cof-body); }

.cof-slots__note { gap: 8px; }

@media (max-width: 780px) { .cof-slots { padding-block: var(--cof-section); } }

/* ------------------------------------------------- Full-width band image --- */

.cof-bandimage img { width: 100%; height: 380px; object-fit: cover; }
@media (max-width: 780px) { .cof-bandimage img { height: 240px; } }

/* ========================================================  EVENTS  ====== */

.cof-eventtypes { padding-block: 88px; }
.cof-eventtypes__grid { gap: 46px; }

.cof-eventcard { display: flex; flex-direction: column; gap: 20px; }
.cof-eventcard__head { display: flex; align-items: center; gap: 13px; }
.cof-eventcard__title { font-family: var(--cof-serif); font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; letter-spacing: 0.06em; }
.cof-eventcard__media { aspect-ratio: 251 / 238; border-radius: var(--cof-r-thumb); overflow: hidden; }
.cof-eventcard__media img { width: 100%; height: 100%; object-fit: cover; }
.cof-eventcard__text { font-size: 15px; line-height: 1.68; color: var(--cof-body); }

.cof-spaces { padding-block: 84px; }
.cof-spaces__grid { gap: 20px; width: 100%; }
.cof-spaces__tile { aspect-ratio: 192 / 167; border-radius: var(--cof-r-thumb); overflow: hidden; }
/* The tiles are small, so the play button is scaled to suit them. */
.cof-spaces__tile .cof-play { width: 54px; height: 54px; }
.cof-spaces__tile .cof-play svg { width: 18px; height: 20px; }

@media (max-width: 780px) {
  .cof-eventtypes, .cof-spaces { padding-block: var(--cof-section); }
  .cof-eventtypes__grid { gap: 36px; }
}

/* ---------------------------------------------------- Enquiry section --- */

.cof-enquiry { padding-block: 92px; }
.cof-enquiry__grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 76px; align-items: start; }

@media (max-width: 980px) {
  .cof-enquiry { padding-block: var(--cof-section); }
  .cof-enquiry__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* =========================================================  FORMS  ====== */

.cof-form { display: flex; flex-direction: column; gap: 16px; }
.cof-form form { display: flex; flex-direction: column; gap: 16px; }
.cof-form__row { display: grid; gap: 16px; }
.cof-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
  .cof-form__row--2 { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The privacy line under both forms. Deliberately quiet: it is an information
 * duty rather than a message, and it should not compete with the send button
 * standing right under it. The link keeps its underline, because a link a
 * visitor is being told to read is one they have to be able to find.
 */
.cof-form__privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cof-muted);
}
.cof-form__privacy a {
  color: var(--cof-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cof-form__privacy a:hover { color: var(--cof-ink); }

.cof-form__notice {
  padding: 16px 20px;
  border-radius: var(--cof-r-input);
  font-size: 15px;
  line-height: 1.6;
}
.cof-form__notice--ok {
  background: var(--cof-card);
  border: 1px solid var(--cof-control);
  color: var(--cof-ink);
}
.cof-form__notice--error {
  background: var(--cof-card);
  border: 1px solid #8B2F1F;
  color: #7A2818;
}

/* The select needs its own chevron because appearance:none removes the native one. */
.cof-field__select { position: relative; display: flex; flex-direction: column; }
.cof-field__chevron { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cof-muted); }

/* A date input keeps its native picker button, so it needs room on the right. */
.cof-field input[type="date"] { padding-right: 12px; }

/* ========================================================================== */
/* COF INTERIOR                                                               */
/* ========================================================================== */

/* --------------------------------------------------------- 5.1 Intro --- */

/*
 * The board puts a fixed 520px text column beside an image that takes whatever
 * is left, which at the 1440px page width is 704px. Expressed as a grid the
 * proportion survives at every width instead of only at the one it was drawn at.
 */
.cof-intro { padding-block: 84px 56px; }
.cof-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 704fr);
  gap: 64px;
  align-items: center;
}
/* The board sets this heading at 42px, a step below the site's usual h2. */
.cof-intro__heading { font-size: clamp(28px, 2.92vw, 42px); }
.cof-intro__media {
  aspect-ratio: 704 / 460;
  border-radius: var(--cof-r-card);
  overflow: hidden;
}

.cof-areacard {
  display: flex;
  gap: 20px;
  padding: 26px 28px;
  border: 1px solid var(--cof-hairline);
  border-radius: var(--cof-r-thumb);
}
/* Without this the icon is squeezed by the text beside it. */
.cof-areacard > svg { flex: none; }
.cof-areacard__body { display: flex; flex-direction: column; gap: 9px; }
.cof-areacard__title { font-size: 15px; font-weight: 600; letter-spacing: 0.07em; }
.cof-areacard__text { font-size: 14px; line-height: 1.68; color: var(--cof-body); }

@media (max-width: 980px) {
  .cof-intro { padding-block: var(--cof-section); }
  .cof-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cof-intro__media { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------- 5.2 Gallery row --- */

.cof-gallery-row { background: var(--cof-cream); }
.cof-gallery-row__grid { gap: 18px; }
.cof-gallery-row__item {
  aspect-ratio: 617 / 460;
  border-radius: var(--cof-r-thumb);
  overflow: hidden;
}
.cof-gallery-row__item img { width: 100%; height: 100%; object-fit: cover; }
/* These four are small, so the play button is scaled down to match. */
.cof-gallery-row__item .cof-play { width: 54px; height: 54px; }
.cof-gallery-row__item .cof-play svg { width: 18px; height: 20px; }

/*
 * The shared 4-up grid drops to a single column below 780px, which would stack
 * four full-width photographs and add a screen and a half of scrolling for what
 * is only a gallery strip. Two across keeps it a strip.
 */
@media (max-width: 780px) {
  .cof-gallery-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ----------------------------------------------------- 5.3 Two areas --- */

.cof-areas { padding-block: 64px 56px; }
.cof-areas__heading { letter-spacing: 0.07em; }
/* The board sets this paragraph inside deep side margins: 200px either side of
   a 1440px page, so 1040px of measure, which lands it on two lines. */
.cof-areas__text { max-width: 1040px; line-height: 1.75; }

@media (max-width: 780px) { .cof-areas { padding-block: var(--cof-section); } }

/* ------------------------------------------------------ 5.4 Features --- */

.cof-features-panel { background: var(--cof-cream); }
.cof-panel {
  padding: 44px 48px;
  background: var(--cof-card);
  border: 1px solid var(--cof-hairline);
  border-radius: var(--cof-r-card);
}
.cof-panel__grid { gap: 44px; }
.cof-panelitem { display: flex; flex-direction: column; gap: 14px; }
.cof-panelitem > svg { flex: none; }
.cof-panelitem__title { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; line-height: 1.5; }
.cof-panelitem__text { font-size: 13px; line-height: 1.72; color: var(--cof-body); }

@media (max-width: 780px) {
  .cof-panel { padding: 32px 24px; }
  .cof-panel__grid { gap: 32px; }
}

/* ----------------------------------------------- 5.5 Second gallery --- */

.cof-gallery2 { padding-block: 56px 72px; }
/*
 * 880 + 18 + 390 = 1288, the content width. The stack's two 113px cells plus
 * their 18px gap come to 244px, which is exactly the wide image's height, so
 * the two columns finish level without either being given a fixed height.
 */
.cof-gallery2__grid {
  display: grid;
  grid-template-columns: minmax(0, 880fr) minmax(0, 390fr);
  gap: 18px;
}
.cof-gallery2__wide {
  aspect-ratio: 880 / 244;
  border-radius: var(--cof-r-thumb);
  overflow: hidden;
}
.cof-gallery2__stack { display: flex; flex-direction: column; gap: 18px; }
.cof-gallery2__cell {
  aspect-ratio: 390 / 113;
  border-radius: var(--cof-r-thumb);
  overflow: hidden;
}
.cof-gallery2__cell img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .cof-gallery2 { padding-block: var(--cof-section); }
  .cof-gallery2__grid { grid-template-columns: minmax(0, 1fr); }
  /*
   * Once it is full width a 3.6:1 letterbox is barely a photograph, so both
   * the wide image and the stack open out to something you can actually see.
   */
  .cof-gallery2__wide { aspect-ratio: 16 / 9; }
  .cof-gallery2__stack { flex-direction: row; }
  .cof-gallery2__cell { flex: 1 1 0; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------- 5.6 Events band --- */

.cof-ctaband-wrap { padding-block: 0 88px; }
.cof-ctaband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 44px 52px;
  background: var(--cof-espresso);
  border-radius: var(--cof-r-card);
  color: var(--cof-on-dark);
}
.cof-ctaband__body { display: flex; flex-direction: column; gap: 14px; }
.cof-ctaband__heading { font-size: clamp(22px, 2.22vw, 32px); letter-spacing: 0.04em; }
.cof-ctaband__text { font-size: 15px; line-height: 1.7; color: var(--cof-muted-dark); max-width: 56ch; }
.cof-ctaband .cof-btn { flex: none; }

@media (max-width: 780px) {
  .cof-ctaband-wrap { padding-block: 0 var(--cof-section); }
  .cof-ctaband { flex-direction: column; align-items: flex-start; gap: 28px; padding: 32px 24px; }
}

/* ========================================================================== */
/* COFAMILY                                                                   */
/* ========================================================================== */

/*
 * Named "story" rather than "family" on purpose: the Home page already owns
 * .cof-family for its teaser band, and that band sets a fixed 620px image height
 * and its own grid ratio, both of which would have leaked in here.
 */
.cof-story { padding-block: 76px 96px; }
.cof-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 672fr);
  gap: 56px;
  align-items: start;
}
.cof-story__media {
  aspect-ratio: 560 / 760;
  border-radius: var(--cof-r-card);
  overflow: hidden;
}
.cof-story__media img { width: 100%; height: 100%; object-fit: cover; }

.cof-story__body { display: flex; flex-direction: column; gap: 22px; }
.cof-story__heading {
  font-family: var(--cof-serif);
  font-size: clamp(38px, 4.3vw, 62px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
/* "COF" is set bold and "amily" light, as one word in two weights. */
.cof-story__heading strong { font-weight: 600; }

.cof-story__text { display: flex; flex-direction: column; gap: 19px; }
.cof-story__text p { font-size: 15px; line-height: 1.75; color: var(--cof-body); }
.cof-story__text strong { font-weight: 600; }
/* The concept underlines "warmth" as well as emboldening it. */
.cof-story__text u { text-underline-offset: 0.18em; }

.cof-story__closing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-family: var(--cof-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.35;
  color: var(--cof-quote);
}

@media (max-width: 980px) {
  .cof-story { padding-block: var(--cof-section); }
  .cof-story__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Full width, a 560:760 portrait would be most of a phone screen tall. */
  .cof-story__media { aspect-ratio: 4 / 3; }
}

/* ========================================================================== */
/* CONTACT                                                                    */
/* ========================================================================== */

.cof-contacthero { padding-block: 66px; }
.cof-contacthero__heading {
  font-family: var(--cof-serif);
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.cof-contacthero__line { font-size: 16px; color: var(--cof-muted-dark); }

.cof-contact { padding-block: 84px; }
/* 772 + 56 + 460 = 1288, the content width. */
.cof-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 772fr) minmax(0, 460fr);
  gap: 56px;
  align-items: start;
}

/* ------------------------------------------------------ Details panel --- */

.cof-details {
  padding: 44px 46px;
  background: var(--cof-espresso);
  border-radius: var(--cof-r-card);
  color: var(--cof-on-dark-soft);
}
/*
 * The rules sit between rows rather than after each one, so a panel missing its
 * phone number or its opening hours does not end on a hairline over nothing.
 */
.cof-details__row + .cof-details__row {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--cof-hairline-dark);
}
.cof-details__label {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--cof-muted-dark);
  margin-bottom: 9px;
}
.cof-details__address { text-transform: uppercase; font-size: 20px; letter-spacing: 0.05em; color: var(--cof-gold); }
.cof-details__value { font-size: 17px; }
.cof-details__value a {
  position: relative;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.cof-details__value a:hover { color: var(--cof-gold); }
/* A 17px line of text is a 25px tap target. The hit area is grown with a
   pseudo-element rather than padding, so the rows keep the spacing the panel
   was drawn with. */
.cof-details__value a::after { content: ''; position: absolute; inset: -10px -8px; }
.cof-details__hours { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.6; }

/* ---------------------------------------------------------------- Map --- */

.cof-contactmap { padding-block: 0 88px; background: var(--cof-cream); }
.cof-contactmap__frame {
  border-radius: var(--cof-r-card);
  overflow: hidden;
  line-height: 0; /* an iframe is inline, and would otherwise leave a strip below itself */
}
.cof-contactmap__frame iframe,
.cof-contactmap__frame img { width: 100%; height: 250px; border: 0; display: block; object-fit: cover; }

@media (max-width: 980px) {
  .cof-contact { padding-block: var(--cof-section); }
  .cof-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 780px) {
  .cof-contacthero { padding-block: 48px; }
  .cof-details { padding: 32px 24px; }
  .cof-contactmap { padding-block: 0 var(--cof-section); }
  .cof-contactmap__frame iframe,
  .cof-contactmap__frame img { height: 220px; }
}