/* Colour ideas page (/colour-ideas/). Uses the theme colours from style.css. */

.cp-intro { background: var(--bluestone); color: var(--white); padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.cp-intro .eyebrow { color: var(--brass-light); }
.cp-intro h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-bottom: 14px; }
.cp-intro em.accent { color: var(--brass-light); }
.cp-intro .lead { color: rgba(255,255,255,.82); max-width: 62ch; }

/* Palette dock: sticky under the header on desktop, fixed at the bottom on phones */
.cp-dock { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mortar); box-shadow: 0 6px 16px rgba(0,0,0,.05); }
.cp-dock-inner { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.cp-pals { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; flex: 1; min-width: 0; padding: 2px; }
.cp-pals::-webkit-scrollbar { display: none; }
.cp-pal { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 14px 6px 7px; border: 1.5px solid var(--mortar); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.cp-pal:hover { border-color: var(--brass); }
.cp-pal[aria-pressed="true"] { background: var(--bluestone); border-color: var(--bluestone); color: var(--white); }
.cp-mini { display: grid; grid-template-columns: repeat(4, 9px); height: 26px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.cp-pal[aria-pressed="true"] .cp-mini { border-color: rgba(255,255,255,.5); }
.cp-dock-save { display: none; }

.cp-body { padding-block: 24px var(--section); }

/* Palette guide */
.cp-guide { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 40px; background: var(--white); border: 1px solid var(--mortar); border-radius: 12px; padding: clamp(20px, 3vw, 32px); }
.cp-guide h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cp-tag { color: var(--slate); margin-top: 4px; }
.cp-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-top: 18px; }
.cp-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-chip i { width: 46px; height: 46px; flex: none; border-radius: 8px; border: 1px solid rgba(0,0,0,.14); }
.cp-chip b { display: block; font-size: 14px; line-height: 1.25; }
.cp-chip small { display: block; font-size: 13px; color: var(--slate); }
.cp-lab { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 4px; }
.cp-guide ul { padding-left: 1.1em; margin-bottom: 14px; }
.cp-guide li + li { margin-top: 4px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cp-status { font-size: 14px; color: var(--slate); min-height: 1.4em; margin-top: 8px; }

/* Four rooms: 2x2 on desktop */
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.cp-room { margin: 0; background: var(--white); border: 1px solid var(--mortar); border-radius: 12px; overflow: hidden; }
.cp-frame { position: relative; aspect-ratio: 1376 / 768; background: #E8E4DB; }
.cp-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.cp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-before { opacity: 0; transition: opacity .25s ease; }
.is-before .cp-before { opacity: 1; }
.cp-hold { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(22,26,30,.82); color: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.cp-hold svg { width: 16px; height: 16px; }
.is-before .cp-hold { background: var(--brass-light); color: var(--bluestone); }
.cp-room figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; font-weight: 600; font-size: 15px; }
.cp-room figcaption span { font-weight: 400; color: var(--slate); }
.cp-note { margin-top: 20px; font-size: 14px; color: var(--slate); max-width: 80ch; }

.cp-cta { margin-top: clamp(32px, 5vw, 56px); background: var(--bluestone); color: var(--white); border-radius: 12px; padding: clamp(24px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cp-cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cp-cta em.accent { color: var(--brass-light); }
.cp-cta p { color: rgba(255,255,255,.82); margin-top: 6px; max-width: 52ch; }
.cp-cta .btn-outline { border-color: rgba(255,255,255,.6); color: var(--white); }
.cp-cta .btn-outline:hover { background: var(--white); color: var(--bluestone); }

/* Enlarged room */
.cp-lightbox { width: min(1200px, 96vw); max-width: none; padding: 0; border: 0; border-radius: 12px; background: var(--bluestone-deep); color: var(--white); }
.cp-lightbox::backdrop { background: rgba(10,12,14,.82); }
.cp-lightbox .cp-frame { background: #111; }
.cp-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.cp-lightbox-close { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: var(--white); font-weight: 600; cursor: pointer; }

@media (max-width: 960px) {
  .page-colour .mobile-bar { display: none; }
  .page-colour { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cp-dock { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: 0; border-top: 1px solid var(--mortar); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .cp-dock-inner { padding-block: 10px calc(10px + env(safe-area-inset-bottom)); padding-inline: 12px; }
  .cp-dock-save { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--brass-light); color: var(--bluestone); cursor: pointer; }
  .cp-dock-save svg { width: 22px; height: 22px; }
  .cp-guide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cp-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Wide screens: every palette visible, and the palette info sits in a sticky
   left column so all four rooms fit on screen together */
@media (min-width: 961px) {
  .cp-pals { flex-wrap: wrap; overflow: visible; }
  .cp-pal { min-height: 40px; padding-block: 4px; font-size: 13.5px; }
}
@media (min-width: 1100px) {
  .cp-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px 24px; align-items: start; }
  .cp-guide { grid-template-columns: 1fr; position: sticky; top: calc(var(--header-h) + 128px); padding: 22px; gap: 16px; }
  .cp-guide h2 { font-size: 1.7rem; }
  .cp-chips { grid-template-columns: 1fr 1fr; }
  .cp-grid { margin-top: 0; gap: 16px; }
  .cp-room figcaption { padding: 9px 14px; font-size: 14px; }
  .cp-note, .cp-cta { grid-column: 1 / -1; }
  .cp-note { margin-top: 4px; }
}

/* Phones and tablets: palette name and colours, then the rooms, then the notes */
@media (max-width: 1099px) {
  .cp-body { display: flex; flex-direction: column; }
  .cp-guide { display: contents; }
  .cp-guide > div { background: var(--white); border: 1px solid var(--mortar); border-radius: 12px; padding: 20px; }
  .cp-guide > div:first-child { order: 1; }
  .cp-grid { order: 2; }
  .cp-guide > div:last-child { order: 3; margin-top: 20px; }
  .cp-note { order: 4; }
  .cp-cta { order: 5; }
}
@media (max-width: 960px) {
  .cp-guide .cp-actions { display: none; }
  .cp-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .cp-chip { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cp-chip i { width: 100%; height: 40px; }
  .cp-chip b { font-size: 12.5px; }
  .cp-chip small { font-size: 12px; }
}

/* Save tip under the intro: a brass circle with the same icon as the Save button */
.cp-save-tip { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: var(--brass-light); max-width: 60ch; }
.cp-save-ico { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brass-light); color: var(--bluestone); }
.cp-save-ico svg { width: 22px; height: 22px; }
.cp-dock-hint { display: none; }

/* Wide screens: note and quote box sit under the rooms, beside the sticky panel */
@media (min-width: 1100px) {
  .cp-guide { grid-row: 1 / span 3; }
  .cp-note, .cp-cta { grid-column: 2; }
  .cp-cta { margin-top: 8px; }
}

/* Phones: a small line above the bar says it scrolls, and the right edge fades */
@media (max-width: 960px) {
  .page-colour { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .cp-dock-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--slate); }
  .cp-dock-hint svg { width: 15px; height: 15px; color: var(--brass-text); animation: cp-swipe 1.6s ease-in-out infinite; }
  .cp-dock-inner { padding-top: 6px; }
  .cp-pals { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 28px; }
}
@keyframes cp-swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Phone dock, iPhone-safe: the swipe row (palettes) sits on top, tap-only items
   (hint + Save) below it. */
.cp-dock-row { display: none; }
@media (max-width: 960px) {
  .cp-dock-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .cp-pals { flex: none; }
  .cp-dock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .cp-dock-hint { padding: 0; }
  .cp-dock-save { width: auto; height: 40px; border-radius: 999px; padding: 0 16px 0 12px; gap: 6px; font: inherit; font-size: 15px; font-weight: 700; }
  .cp-dock-save svg { width: 20px; height: 20px; }
  .page-colour { padding-bottom: 132px; }
}