/* ————————————————————————————————————————————
   lil bit cycling v2 — the photo band

   One wide picture with a few words in its corner, the whole band a link.
   In the column by default, rounded like the cards; full-bleed when the
   block's width is set to the window: pulled out of the parent's column to
   the window's edges.
   ———————————————————————————————————————————— */

.lbc-band {
  --coral: #fc4c02;
  --sans:  "Quicksand", "helvetica neue", helvetica, arial, sans-serif;

  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #ddd;
  margin: 2rem 0;
  border-radius: 14px;
}
.lbc-band.alignfull,
.alignfull > .lbc-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
.lbc-band.alignwide,
.alignwide > .lbc-band { margin-left: calc(50% - 50vw + 2rem); margin-right: calc(50% - 50vw + 2rem); }
/* opening a page — the first block, the title hidden — a full-width band sits
   flush under the menu row (the parent pads its column 25px + 20px − 7px
   above); a band kept in the column sits a breath below it, like the first
   line of text would */
.entry-content > .lbc-band.alignfull:first-child { margin-top: -38px; }
.entry-content > .lbc-band:first-child:not(.alignfull) { margin-top: 0; }

/* the band's shape is fixed — short 3:1, medium 5:2, tall 2:1 — whatever
   the window or the picture; a phone's band is squarer (2:1, 16:10, 4:3),
   as a 3:1 strip on a 320px screen would be a sliver */
.lbc-band-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  max-width: none;
  object-fit: cover;
  object-position: var(--lbc-focus, 50% 50%);
  transition: transform .6s ease;
}
/* a phone's band is shorter and squarer, so it crops differently: the
   block's own "on phones" focus, which falls back to the main one */
@media (max-width: 600px) {
  .lbc-band-img { object-position: var(--lbc-focus-phone, var(--lbc-focus, 50% 50%)); }
}
.lbc-band.is-short .lbc-band-img { aspect-ratio: 3 / 1; }
.lbc-band.is-tall  .lbc-band-img { aspect-ratio: 2 / 1; }
@media (max-width: 600px) {
  .lbc-band-img { aspect-ratio: 16 / 10; }
  .lbc-band.is-short .lbc-band-img { aspect-ratio: 2 / 1; }
  .lbc-band.is-tall  .lbc-band-img { aspect-ratio: 4 / 3; }
}
a.lbc-band:hover .lbc-band-img { transform: scale(1.02); }

/* the words: small capitals in the lower left, on a soft scrim so they read
   on any picture */
.lbc-band-text {
  position: absolute;
  left: clamp(1.4rem, 6vw, 5rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  transition: background .2s ease;
}
a.lbc-band:hover .lbc-band-text { background: rgba(0, 0, 0, .5); }
/* the headline: plain larger words in a corner of their own, a soft shadow
   so they read on any picture */
.lbc-band-title {
  position: absolute;
  left: clamp(1.4rem, 6vw, 5rem);
  top: clamp(1rem, 3vw, 2.2rem);
  max-width: 60%;
  font-family: var(--sans);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 24px rgba(0, 0, 0, .3);
  text-wrap: balance;
}
@media (min-width: 601px) {
  .lbc-band-title.is-right, .lbc-band-title.is-top-right { left: auto; right: clamp(1.4rem, 6vw, 5rem); text-align: right; }
  .lbc-band-title.is-left,  .lbc-band-title.is-right     { top: auto; bottom: clamp(1rem, 3vw, 2.2rem); }
}
@media (max-width: 600px) {
  .lbc-band-title { left: 1rem; top: .9rem; font-size: 1rem; max-width: 70%; }
  .lbc-band-title.is-phone-right, .lbc-band-title.is-phone-top-right { left: auto; right: 1rem; text-align: right; }
  .lbc-band-title.is-phone-left,  .lbc-band-title.is-phone-right     { top: auto; bottom: .9rem; }
}

/* the words can take any corner; every band carries both an is-words-* and
   an is-words-phone-* class (the phone one falls back to the main one), so
   each width has its own complete set of rules */
@media (min-width: 601px) {
  .lbc-band.is-words-right .lbc-band-text,
  .lbc-band.is-words-top-right .lbc-band-text { left: auto; right: clamp(1.4rem, 6vw, 5rem); }
  .lbc-band.is-words-top-left .lbc-band-text,
  .lbc-band.is-words-top-right .lbc-band-text { bottom: auto; top: clamp(1rem, 3vw, 2.2rem); }
}
/* on a phone the band is small, so the words are too: the journey cards'
   pill size — and they may take another corner there */
@media (max-width: 600px) {
  .lbc-band-text { font-size: .62rem; padding: .4rem .75rem; left: 1rem; bottom: .9rem; }
  .lbc-band.is-words-phone-right .lbc-band-text,
  .lbc-band.is-words-phone-top-right .lbc-band-text { left: auto; right: 1rem; }
  .lbc-band.is-words-phone-top-left .lbc-band-text,
  .lbc-band.is-words-phone-top-right .lbc-band-text { bottom: auto; top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lbc-band-img, .lbc-band-text { transition: none; }
  a.lbc-band:hover .lbc-band-img { transform: none; }
}