/* ---------------------------------------------------------------------------
   Two additions to the location homepages:

   1. An Instagram grid. Instagram retired the Basic Display API in 2024 and its
      replacement needs a server to refresh tokens, which a static export on
      Railway does not have. So the posts are curated: five real posts with
      their thumbnails served from our own images/instagram/, each linking to
      the post, and a sixth cell that is the follow card. Nothing third-party,
      nothing that expires -- Instagram's own CDN URLs are signed and die within
      days, so hotlinking them would have left holes in the grid.

   2. A mailing-list dialog carrying the monthly prize draw. It waits for a sign
      of interest before it interrupts, remembers a dismissal, and never shows
      again once someone has joined.

   Radius follows --radius--16, the token the property cards and the Oxford
   mosaic use.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. Instagram grid
   =========================================================================== */

/* Four across at the full container width, matching .ch-tiles under "Not Just
   Woodland" -- same column count, same 1.5rem gutter, same breakpoints. The
   grid is a sibling of the title block rather than a child of
   .max-width-xlarge, which was holding it to 960 of the container's 1280. */
.ch-ig__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-ig__grid li {
  margin: 0;
}

.ch-ig__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius--16, 1rem);
  background-color: var(--accent, #3b4126);
}

.ch-ig__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.ch-ig__item:hover img,
.ch-ig__item:focus-visible img {
  transform: scale(1.04);
}

.ch-ig__item:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 3px;
}

/* The glyph marks a reel without needing a second asset per tile. */
.ch-ig__badge {
  position: absolute;
  top: .625rem;
  right: .625rem;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(16, 19, 7, .5));
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .ch-ig__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* .ch-tiles drops to one column here; four photographs at full width would be
   an enormous scroll, so these stay two up. */
@media screen and (max-width: 767px) {
  .ch-ig__grid {
    gap: .75rem;
  }
}

/* ===========================================================================
   2. Mailing-list dialog
   =========================================================================== */

.ch-join {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: rgba(16, 19, 7, .62);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.ch-join.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.ch-join[hidden] {
  display: none;
}

.ch-join__panel {
  position: relative;
  /* Makes the panel its own stacking context, so the owl's negative z-index
     lands above the panel's cream and below the type rather than disappearing
     behind the whole thing. Without this the panel is only a stacking context
     while its open transform is still running. */
  isolation: isolate;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  /* Roomier than a plain dialog would need, because the owl leans into the
     top right and the type has to keep clear of it. */
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius--16, 1rem);
  background-color: var(--brand, #efeed5);
  color: var(--accent, #3b4126);
  text-align: center;
  box-shadow: 0 1.5rem 3.5rem rgba(16, 19, 7, .42);
  transform: translateY(1rem) scale(.97);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}

.ch-join.is-open .ch-join__panel {
  transform: none;
}

/* The peeking owl, borrowed from the footer's mobile corner: same mark, same
   -60deg tilt, same trick of shoving it off the edge so only part of it shows.
   Top right, exactly as the footer has it, rather than the mirror image tried
   first: the close button shares that corner but sits above the owl, and the
   owl is a watermark at 1.27:1 against the cream, so it reads as texture
   behind the button rather than a collision. Drawn as a mask over a colour
   rather than an <img> so it can be tinted, which is how the site draws its
   other single-colour marks. The panel's own overflow does the cropping. */
.ch-join__owl {
  position: absolute;
  top: -9%;
  right: 0;
  z-index: -1;
  width: 8rem;
  aspect-ratio: 36 / 45;
  transform: translateX(46%) rotate(-60deg);
  background-color: #d8d5ad;
  -webkit-mask-image: url("../images/cedar-hollow-owl.svg");
  mask-image: url("../images/cedar-hollow-owl.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

@media screen and (max-width: 479px) {
  .ch-join__owl {
    width: 6.25rem;
  }
}

.ch-join__close {
  position: absolute;
  top: .625rem;
  right: .625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease;
}

.ch-join__close:hover {
  background-color: rgba(59, 65, 38, .1);
}

.ch-join__close:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 2px;
}

.ch-join__close svg {
  width: 1rem;
  height: 1rem;
}

.ch-join__eyebrow {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.ch-join__title {
  margin: 0 0 .75rem;
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.ch-join__copy {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.ch-join__form {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin: 0;
}

.ch-join__form .form_input,
.ch-join__input {
  width: 100%;
  height: 3rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid rgba(59, 65, 38, .35);
  border-radius: 50em;
  background-color: #fff;
  color: var(--accent, #3b4126);
  font-family: inherit;
  font-size: 1rem;
}

.ch-join__input:focus {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 1px;
}

.ch-join__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  border: 0;
  border-radius: 50em;
  background-color: var(--accent, #3b4126);
  color: #f1ecdb;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .18s ease;
}

.ch-join__submit:hover:not(:disabled),
.ch-join__submit:focus-visible {
  opacity: .9;
}

.ch-join__submit:disabled {
  opacity: .6;
  cursor: default;
}

/* The honeypot: named, so the handler forwards it, but never shown or focusable. */
.ch-join__pot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ch-join__small {
  margin: 1rem 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  opacity: .75;
}

.ch-join__small a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.ch-join__msg {
  margin: 0;
  padding: .875rem 1rem;
  border-radius: .75rem;
  font-size: .9375rem;
  line-height: 1.45;
}

.ch-join__msg.is-done {
  background-color: rgba(59, 65, 38, .1);
}

.ch-join__msg.is-fail {
  background-color: rgba(150, 50, 30, .12);
}

@media (prefers-reduced-motion: reduce) {
  .ch-join,
  .ch-join__panel,
  .ch-ig__item img {
    transition: opacity .01s linear, visibility 0s linear .01s;
    transform: none;
  }

  .ch-ig__item:hover img,
  .ch-ig__item:focus-visible img {
    transform: none;
  }
}