/* Curated looks (Boyd-only block, T27). Tokens only; written for phones first.
   Prototype "Try it on one room": a 3:2 photo with a 26 px radius beside the heading and the option buttons
   (8 + 4 columns on desktop). Approved change C4 replaces the configurator with 4 to 6 named looks.
   Phones: heading, photo full width (4:3 crop), labels under it, then the look buttons as a 2-column grid of
   44 px buttons (no sideways scroll). Selected look: dark button, underlined name and a tick (not colour alone).
   Without script (no .looks--tabs) the looks are a plain list of figures: 1 per row, 2 from 600 px. */

.looks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "panel" "tabs";
  gap: var(--space-6);
}
.looks__head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-4); }
.looks__heading { margin: 0; max-width: 100%; overflow-wrap: break-word; }
.looks__intro {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* Panels. Without script: a list of figures. */
.looks__panels {
  grid-area: panel;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.looks__panel { min-width: 0; }
.looks__panel[hidden] { display: none; }
.looks__figure { margin: 0; }
.looks__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--color-surface-quiet);
}
.looks__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  overflow-wrap: break-word;
}
.looks__name {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  color: var(--color-heading);
}
.looks__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--color-text);
}
.looks__label { display: flex; gap: var(--space-2); min-width: 0; }
.looks__label dt { font-weight: var(--fw-bold); color: var(--color-heading); }
.looks__label dd { margin: 0; min-width: 0; }
.looks__label a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.looks__label a:hover { color: var(--color-link-hover); }
.looks__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* Script on (html.js is set in the page head): looks 2 to 6 stay out of layout from the first paint, before
   curatedLooks.js has run, so their lazy photos are never fetched early. Once the script has set up the tab set
   (.looks--tabs) the panels' hidden attribute takes over. Script off: no .js class, so every look shows. */
.js [data-looks]:not(.looks--tabs) [data-looks-panel]:not(:first-child) { display: none; }

/* Tab set (script on). */
.looks--tabs .looks__panels { display: grid; }
.looks--tabs .looks__panel { grid-area: 1 / 1; }
.looks--tabs .looks__name { display: none; }   /* the selected button already names the look */
.looks--tabs .looks__panel:focus-visible { outline-offset: var(--space-1); border-radius: var(--radius-card); }

.looks__tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}
.looks__tabs[hidden] { display: none; }
.looks__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--c-white);
  color: var(--color-heading);
  font: inherit;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-label);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-control);
}
.looks__tab-name { min-width: 0; overflow-wrap: anywhere; }
.looks__tab:hover { border-color: var(--c-brand); }
.looks__tick { flex: none; visibility: hidden; }
.looks__tab[aria-selected="true"] {
  border-color: var(--c-deep-blue);
  background: var(--c-deep-blue);
  color: var(--c-white);
}
.looks__tab[aria-selected="true"] .looks__tab-name {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-heavy);
  text-underline-offset: 4px;
}
.looks__tab[aria-selected="true"] .looks__tick { visibility: visible; }

/* Cross-fade (only when the visitor allows motion; base/motion.css also stops it under reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .looks__panel.is-leaving { z-index: 0; }
  .looks__panel.is-entering { z-index: 1; animation: looks-fade var(--duration-base) var(--ease-brand); }
}
@keyframes looks-fade { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 600px) {
  .looks:not(.looks--tabs) .looks__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .looks__tab { font-size: var(--fs-body); }
}

@media (min-width: 1024px) {
  .looks--tabs .looks__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "panel head" "panel tabs";
    grid-template-rows: auto 1fr;
    column-gap: var(--gutter);
    row-gap: var(--space-8);
    align-items: start;
  }
}