/* Vacations Costa del Sol, the case page (cases/vacations-costa-del-sol.html).

   The portfolio's voice in the brand's colours and forms. David's: the bold line with a cushion, Neue
   Haas for what he says, Satoshi for reading (the brand uses it too), the orange close. The brand's:
   whitewash, sage and sky grounds and a deep palm green for the night, palm green on actions, sea blue for
   details, Playfair for the hours, Cormorant Garamond italics for the turn of a phrase, the Andalusian
   arch, the round search bar and pill buttons with a count. The odd couple: the arch window, on a puffy
   cushion, between "Costa" and "del Sol". */

.case--vacations-costa-del-sol {
  --vcs-cream: #fbfcfa;
  --vcs-sage: #eff2ea;
  --vcs-sage-deep: #e3e9da;
  --vcs-sky: #e6eff3;
  --vcs-green: #2d4130;
  --vcs-green-deep: #1b2a1e;
  --vcs-ink: #1c241d;
  --vcs-text-2: #475047;
  --vcs-sea: #2b6a8f;
  --vcs-sea-light: #9fc6dd;
  --vcs-border: #dce1d5;
  --vcs-serif: "Playfair Display", Georgia, serif;
  --vcs-italic: "Cormorant Garamond", Georgia, serif;
  --vcs-shadow: 0 1.9rem 4rem -1rem rgb(27 42 30 / 0.22);
}

.case--vacations-costa-del-sol [data-theme="light"],
.case--vacations-costa-del-sol [data-theme="sage"],
.case--vacations-costa-del-sol [data-theme="sky"] {
  --bg: var(--vcs-cream);
  --fg: var(--vcs-ink);
  --fg-muted: var(--vcs-text-2);
  --room: var(--bg);
  background: var(--bg);
  color: var(--fg);
}

.case--vacations-costa-del-sol [data-theme="sage"] {
  --bg: var(--vcs-sage);
}

.case--vacations-costa-del-sol [data-theme="sky"] {
  --bg: var(--vcs-sky);
}

.case--vacations-costa-del-sol [data-theme="dark"] {
  --bg: var(--vcs-green-deep);
  --fg: var(--vcs-cream);
  --fg-muted: #bfc9bb;
  --room: var(--vcs-green-deep);
}

.case--vacations-costa-del-sol ::selection {
  background: var(--vcs-sea-light);
  color: var(--vcs-ink);
}

.case--vacations-costa-del-sol :focus-visible {
  outline-color: var(--vcs-sea);
  border-radius: 999px;
}

.vcs-section {
  margin-inline: calc(var(--gutter) * -1);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
}

.vcs-center {
  text-align: center;
}

/* The turn of a phrase, in the brand's Cormorant italics */
.vcs em {
  font-family: var(--vcs-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* The brand's pill: palm green, fully round, with a count in a small circle */
.vcs-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.4em 0.45em 0.4em 1.25em;
  border: 1px solid var(--vcs-green);
  border-radius: 999px;
  background: var(--vcs-green);
  color: var(--vcs-cream);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.vcs-pill__count {
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: rgb(251 252 250 / 0.16);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.vcs-pill svg {
  width: 2em;
  height: 2em;
  padding: 0.5em;
  border-radius: 50%;
  background: var(--vcs-cream);
  color: var(--vcs-green);
  transition: translate 0.3s var(--ease-out);
}

.vcs-pill:hover {
  background: var(--vcs-green-deep);
}

.vcs-pill:hover svg {
  translate: 0 0.12em;
}

.vcs-pill--line {
  background: transparent;
  color: var(--vcs-green);
}

.vcs-pill--line .vcs-pill__count {
  background: rgb(45 65 48 / 0.1);
}

.vcs-pill--line svg {
  background: var(--vcs-green);
  color: var(--vcs-cream);
}

.vcs-pill--line:hover {
  background: rgb(45 65 48 / 0.08);
}

/* The arch: a window with a round top, as on the brand's manifesto */
.vcs-arch {
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  box-shadow: var(--vcs-shadow);
  outline: 1px solid var(--vcs-green);
  outline-offset: 0.6rem;
}

.vcs-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ 1. The opening */

.vcs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-top: clamp(6.5rem, 11vw, 9.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.vcs-crumbs {
  display: flex;
  gap: 0.6em;
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vcs-crumbs a {
  color: var(--vcs-sea);
  transition: color 0.2s var(--ease-out);
}

.vcs-crumbs a:hover {
  color: var(--vcs-green);
}

/* The name as on the logo: "Vacations" in italics, then the bold line */
.vcs-name {
  display: grid;
  margin: clamp(0.25rem, 1.5vw, 1.25rem) 0 0;
}

.vcs-name__script {
  margin-bottom: -0.05em;
  padding-left: 0.08em;
  font-family: var(--vcs-italic);
  font-size: clamp(2.5rem, 6.4vw, 7rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--vcs-green);
}

.cushion--vcs svg {
  width: 72%;
  height: 72%;
}

.vcs-hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: end;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.vcs-hero__lead {
  grid-column: 1 / 8;
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  padding-bottom: 1rem;
}

.vcs-hero__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.7vw, 4.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.vcs-hero__statement em {
  font-size: 1.1em;
  line-height: 0.95;
  color: var(--vcs-green);
}

.vcs-hero__text {
  max-width: 36rem;
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
}

.vcs-hero .vcs-arch {
  grid-column: 9 / 13;
  aspect-ratio: 3 / 4.2;
}

/* The search bar of the home, holding the facts: white, round, four fields and the green button */
.vcs-search {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0.6rem;
  border: 1px solid var(--vcs-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--vcs-shadow);
}

.vcs-search div {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 1.1rem;
}

.vcs-search div + div {
  border-left: 1px solid var(--vcs-border);
}

.vcs-search dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--fg-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vcs-search dt svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--vcs-sea);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vcs-search dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.vcs-search__go {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  align-self: stretch;
  padding: 0 1.5rem;
  border-radius: 0.85rem;
  background: var(--vcs-green);
  color: var(--vcs-cream);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease-out);
}

.vcs-search__go:hover {
  background: var(--vcs-green-deep);
}

.vcs-search__go svg {
  width: 1em;
  height: 1em;
}

/* ------------------------------------------------------------------ The cover */

.vcs-cover {
  margin-block: 0;
}

.vcs-cover__screens {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding-right: clamp(2rem, 8vw, 8rem);
}

.vcs-screen--desktop {
  overflow: hidden;
  border: 1px solid var(--vcs-border);
  background: #fff;
  box-shadow: var(--vcs-shadow);
}

.vcs-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.vcs-screen--phone {
  position: absolute;
  right: 0;
  bottom: -2rem;
  width: clamp(5.5rem, 18%, 13rem);
  overflow: hidden;
  border: 1px solid var(--vcs-border);
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: var(--vcs-shadow);
}

.vcs-cover figcaption {
  max-width: 76rem;
  margin: clamp(3rem, 5vw, 4rem) auto 0;
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vcs-cover figcaption::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 0.75rem;
  vertical-align: -1px;
  background: var(--vcs-sea);
}

/* ------------------------------------------------------------------ The hours */

.vcs-hour {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: center;
}

.vcs-hour__text {
  grid-column: 1 / 6;
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.vcs-hour__photo {
  grid-column: 7 / 13;
  margin: 0;
  overflow: hidden;
  box-shadow: var(--vcs-shadow);
}

.vcs-hour__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.vcs-hour--flip .vcs-hour__text {
  grid-column: 8 / 13;
  grid-row: 1;
}

.vcs-hour--flip .vcs-hour__photo {
  grid-column: 1 / 7;
  grid-row: 1;
}

/* The time of the brand's hours: Playfair numerals and a small label beside them */
.vcs-time {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--vcs-serif);
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.vcs-time span {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.vcs-hour__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4.75rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* The italic turn is larger, as Cormorant sits small next to Neue Haas */
.vcs-hour__title em {
  display: block;
  font-size: 1.12em;
  line-height: 0.92;
  color: var(--vcs-green);
}

[data-theme="dark"] .vcs-hour__title em {
  color: var(--vcs-sea-light);
}

.vcs-hour__text > p:not([class]) {
  max-width: 50ch;
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.6;
}

.vcs-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vcs-list li {
  position: relative;
  max-width: 54ch;
  padding-left: 1.4rem;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* A tiny arch as the bullet */
.vcs-list li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.55rem;
  height: 0.75rem;
  border-radius: 999px 999px 0 0;
  background: var(--vcs-sea);
}

/* 18:00, wider: the text above and the three steps of a booking in a row */
.vcs-hour--wide .vcs-hour__text {
  grid-column: 1 / 8;
}

.vcs-hour--wide .vcs-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem var(--gutter);
}

.vcs-hour--wide .vcs-hour__text {
  grid-column: 1 / -1;
}

.vcs-flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: 1rem;
}

.vcs-flow figure {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.vcs-flow figure:nth-child(2) {
  translate: 0 1.5rem;
}

.vcs-flow figure:nth-child(3) {
  translate: 0 3rem;
}

.vcs-flow figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.vcs-flow figcaption span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--vcs-sea);
  color: #fff;
  font-size: 0.8125rem;
}

/* 21:00, the night: deep green, the arch and the back office */
.vcs-night {
  display: block;
}

.vcs-night__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.vcs-night .vcs-hour__text {
  grid-column: 1 / 8;
}

.vcs-arch--small {
  grid-column: 9 / 12;
  aspect-ratio: 3 / 4;
  outline-color: var(--vcs-sea-light);
}

/* ------------------------------------------------------------------ Six languages */

.vcs-langs__lead {
  max-width: 36rem;
  margin: 1rem auto clamp(2.5rem, 5vw, 4rem);
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
}

.vcs-langs__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  max-width: 80rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.vcs-langs__row li {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
}

/* Each phone stands under an arch, as the palette swatches do on the brand's sheet */
.vcs-langs__row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 999px 999px 1rem 1rem;
  box-shadow: var(--vcs-shadow);
}

.vcs-langs__row span {
  font-family: var(--vcs-serif);
  font-size: 1.25rem;
}

.vcs-langs__row li:nth-child(even) {
  margin-top: 2rem;
}

.vcs-langs__row li.will-rise {
  opacity: 0;
  translate: 0 3rem;
}

.vcs-langs__row li.will-rise.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.8s var(--ease-out), translate 1.2s var(--ease-out);
}

.vcs-langs__row li:nth-child(2).is-in { transition-delay: 0.06s; }
.vcs-langs__row li:nth-child(3).is-in { transition-delay: 0.12s; }
.vcs-langs__row li:nth-child(4).is-in { transition-delay: 0.18s; }
.vcs-langs__row li:nth-child(5).is-in { transition-delay: 0.24s; }
.vcs-langs__row li:nth-child(6).is-in { transition-delay: 0.3s; }

/* ------------------------------------------------------------------ The result */

.vcs-result {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: center;
}

.vcs-result__text {
  grid-column: 1 / 7;
  display: grid;
  gap: 1.25rem;
}

.vcs-result__text p {
  max-width: 46ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
}

/* The booking summary card of the checkout */
.vcs-summary {
  grid-column: 8 / 13;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.75rem 1.5rem;
  border: 1px solid var(--vcs-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--vcs-shadow);
}

.vcs-summary img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.75rem;
  border-radius: 0.6rem;
}

.vcs-summary > p,
.vcs-summary dl {
  margin: 0;
  padding-inline: 0.75rem;
}

.vcs-summary__name {
  font-family: var(--vcs-serif);
  font-size: 1.5rem;
}

.vcs-summary__place {
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

.vcs-summary dl {
  display: grid;
  margin-top: 0.75rem;
}

.vcs-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--vcs-border);
  font-size: 0.875rem;
}

.vcs-summary dt {
  color: var(--fg-muted);
}

.vcs-summary dd {
  margin: 0;
  text-align: right;
}

.vcs-summary .vcs-summary__total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--vcs-ink);
  font-weight: 700;
}

.vcs-summary__total span:last-child {
  font-family: var(--vcs-serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.vcs-summary__note {
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ Next project */

.vcs-next {
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 4vw, 3rem);
}

.vcs-next__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
}

.vcs-next__label em {
  color: var(--vcs-green);
  font-size: 1.12em;
}

/* An apartment card of the listing */
.vcs-next__card {
  position: relative;
  display: grid;
  gap: 0.4rem;
  width: min(100%, 40rem);
}

.vcs-next__card img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: var(--vcs-shadow);
  transition: scale 0.8s var(--ease-out);
}

.vcs-next__card:hover img {
  scale: 1.02;
}

.vcs-next__small {
  color: var(--fg-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vcs-next__name {
  padding-right: 3.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.vcs-next__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--vcs-green);
  border-radius: 50%;
  color: var(--vcs-green);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.vcs-next__arrow svg {
  width: 1rem;
  height: 1rem;
}

.vcs-next__card:hover .vcs-next__arrow {
  background: var(--vcs-green);
  color: var(--vcs-cream);
}

@media (max-width: 960px) {
  .vcs-hero__lead,
  .vcs-hour__text,
  .vcs-hour__photo,
  .vcs-hour--flip .vcs-hour__text,
  .vcs-hour--flip .vcs-hour__photo,
  .vcs-night .vcs-hour__text,
  .vcs-result__text,
  .vcs-summary {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .vcs-hero .vcs-arch {
    grid-column: 3 / 11;
    grid-row: 1;
    aspect-ratio: 4 / 3.6;
  }

  .vcs-arch--small {
    display: none;
  }

  .vcs-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vcs-search div:nth-child(3) {
    border-left: 0;
  }

  .vcs-search__go {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 0.4rem;
  }

  .vcs-hour--wide .vcs-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .vcs-langs__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vcs-summary {
    max-width: 30rem;
  }
}

@media (max-width: 700px) {
  .vcs-name__script {
    font-size: 13vw;
  }

  .vcs-hero__statement {
    font-size: 8.4vw;
  }

  .vcs-hero .vcs-arch {
    grid-column: 1 / -1;
  }

  .vcs-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .vcs-search div + div {
    border-left: 0;
    border-top: 1px solid var(--vcs-border);
  }

  .vcs-screen--phone {
    width: 28%;
    border-radius: 0.9rem;
  }

  .vcs-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .vcs-flow figure:nth-child(n) {
    translate: none;
  }

  .vcs-langs__row li:nth-child(even) {
    margin-top: 0;
  }
}

/* Body copy without a word left alone on its last line */
.case--vacations-costa-del-sol p {
  text-wrap: pretty;
}

.vcs-flow .vcs-screen--desktop {
  border: 0;
}

/* ------------------------------------------------------------------ VCS Studio, as one still sheet

   Today large, the calendar, the prices and a booking stacked beside it; the Studio's own rounded screens and
   its green pills for labels */
.mosaic--vcs {
  --mosaic-radius: 0.6rem;
  --mosaic-shadow: 0 2rem 4rem -2rem rgb(0 0 0 / 0.6);
  --mosaic-chip-bg: var(--vcs-green);
  --mosaic-row-small: 7rem;
  --mosaic-first-rows-small: 2;
}

@media (min-width: 701px) {
  .mosaic--vcs {
    --mosaic-cols: repeat(4, minmax(0, 1fr));
    --mosaic-areas: "a a a b" "a a a c" "a a a d";
    --mosaic-row: clamp(8.5rem, 12.5vw, 13.5rem);
  }

  .mosaic--vcs .mosaic__tile:nth-child(1) { grid-area: a; }
  .mosaic--vcs .mosaic__tile:nth-child(2) { grid-area: b; }
  .mosaic--vcs .mosaic__tile:nth-child(3) { grid-area: c; }
  .mosaic--vcs .mosaic__tile:nth-child(4) { grid-area: d; }
}