/* ==========================================================================
   Craft & Creation — site styles on top of MudBlazor.

   Colour, typography, spacing and every component come from the MudBlazor theme in
   Theme/CraftTheme.cs. This file only covers what the library does not: art-directed
   imagery, the image tiles, and a few accessibility details. Colours are always read
   from MudBlazor's CSS variables so both themes stay in step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
  FocusOnNavigate parks focus on each page's heading so screen readers announce the new
  page. Those targets carry tabindex="-1" and are not interactive, so a visible ring there
  reads as a rendering bug.
*/
[tabindex="-1"]:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   App bar and footer
   -------------------------------------------------------------------------- */

.app-bar {
  border-bottom: 1px solid var(--mud-palette-lines-default);
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--mud-palette-text-primary);
  text-decoration: none;
}

.brand__mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
}

.brand__name {
  font-weight: 600;
  font-size: 1rem;
}

.site-footer {
  border-top: 1px solid var(--mud-palette-lines-default);
  background: var(--mud-palette-background-gray);
}

.site-footer__lockup {
  width: clamp(10rem, 24vw, 13rem);
  height: auto;
  display: block;
}

.site-footer__tagline {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* --------------------------------------------------------------------------
   Imagery
   -------------------------------------------------------------------------- */

img {
  max-width: 100%;
}

.hero-lede {
  max-width: 34rem;
  font-size: 1.075rem;
}

.hero-image,
.studio-image,
.process-image,
.product-hero {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  background: var(--mud-palette-background-gray);
}

.hero-image {
  aspect-ratio: 1 / 1;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

.studio-image {
  aspect-ratio: 14 / 9;
}

.process-image {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.process-panel {
  background: var(--mud-palette-background-gray);
}

/* Media well shared by portfolio and product cards. The aspect ratio is reserved up front
   so cards do not jump as their photos arrive. */
.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mud-palette-background-gray);
  overflow: hidden;
}

.card-media--square {
  aspect-ratio: 1 / 1;
}

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

.card-media__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.portfolio-card,
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portfolio-card:hover,
.product-link:hover .product-card {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.1);
}

.product-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-meta {
  display: grid;
  gap: 0.15rem;
}

.technique-chip {
  margin: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Technique tiles
   -------------------------------------------------------------------------- */

.tile {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
}

.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mud-palette-background-gray);
}

.tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

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

.tile__count {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
  font-weight: 700;
}

.tile__arrow {
  transition: transform 0.2s ease;
}

.tile:hover .tile__arrow,
.tile:focus-visible .tile__arrow {
  transform: translateX(3px);
}

.tile:focus-visible {
  outline: 2px solid var(--mud-palette-tertiary);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Portfolio, product page and uploads
   -------------------------------------------------------------------------- */

.portfolio-search {
  flex: 0 1 18rem;
  min-width: 14rem;
}

.product-gallery {
  position: sticky;
  top: 5.5rem;
}

.product-hero {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--mud-palette-lines-default);
}

.product-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
}

.product-thumb {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mud-palette-background-gray);
  cursor: pointer;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb.is-active {
  border-color: var(--mud-palette-secondary);
}

.quantity-field {
  max-width: 10rem;
}

.rich-text ul,
.rich-text ol {
  padding-left: 1.3rem;
}

.personalize {
  background: var(--mud-palette-background-gray);
}

.plain-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.dropzone {
  border-style: dashed !important;
  border-width: 2px !important;
  background: var(--mud-palette-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone.is-dragover {
  border-color: var(--mud-palette-secondary) !important;
  background: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--mud-palette-surface));
}

.dropzone.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.upload-item--complete {
  border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent) !important;
}

.upload-item--failed {
  border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent) !important;
}

@media (max-width: 959.98px) {
  .product-gallery {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Cart
   -------------------------------------------------------------------------- */

.cart-drawer__body {
  overflow-y: auto;
}

.cart-line__image {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mud-palette-background-gray);
}

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

.quantity-stepper {
  border: 1px solid var(--mud-palette-lines-inputs);
  border-radius: 999px;
}

.text-nowrap {
  white-space: nowrap;
}

/* The badge sits over an icon button; keep it from clipping the app bar. */
.cart-badge .mud-badge {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Portfolio gallery tiles and project pages
   -------------------------------------------------------------------------- */

.portfolio-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 14px;
}

.portfolio-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mud-palette-background-gray);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  transition: box-shadow 0.2s ease;
}

.portfolio-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.portfolio-tile:hover .portfolio-tile__media,
.portfolio-tile:focus-visible .portfolio-tile__media {
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.14);
}

.portfolio-tile:hover .portfolio-tile__media img,
.portfolio-tile:focus-visible .portfolio-tile__media img {
  transform: scale(1.04);
}

.portfolio-tile:focus-visible {
  outline: 2px solid var(--mud-palette-tertiary);
  outline-offset: 4px;
}

.portfolio-tile__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Bottom-right, so it never sits on top of the Featured chip. */
.portfolio-tile__play {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(2px);
}

.portfolio-tile__body {
  display: block;
  padding: 0.75rem 0.15rem 0;
}

.portfolio-tile:hover .portfolio-tile__title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.project-title {
  font-size: clamp(2rem, 4.5vw, 2.9rem) !important;
}

/* The price answers the question a visitor came with, so it is set apart from the rest of the
   details rather than lost in the run of metadata above it. */
.project-price {
  padding-left: 0.85rem;
  border-left: 3px solid var(--mud-palette-secondary);
}

.project-price__amount {
  font-weight: 700;
}

.project-photo {
  margin: 0 0 1.75rem;
}

.project-photo img,
.project-photo video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--mud-palette-background-gray);
}

/* A video's controls sit on its own black bar, which the rounded corners would clip awkwardly
   on some browsers; a dark backdrop keeps the corners clean while it loads.

   Phone videos are usually portrait, and at full column width one would be taller than the
   screen and push everything after it out of sight. Capping the height keeps the whole clip
   visible at once; the width then follows from its shape, centred in the column. */
.project-photo video {
  background: #000;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
}

.project-photo figcaption {
  margin-top: 0.6rem;
  padding: 0 0.15rem;
}

@media (min-width: 960px) {
  /* The write-up stays in view while the photos scroll past it. */
  .project-info {
    position: sticky;
    top: 5.5rem;
  }
}

/*
  Policy pages. Plain running text, which the rest of the site has almost none of, so the
  spacing and measure are set here rather than fought with utility classes on every page.
*/
.policy {
  line-height: 1.7;
}

.policy h2 {
  margin: 2.25rem 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mud-palette-text-primary);
}

.policy h2:first-child {
  margin-top: 0;
}

.policy p,
.policy ul {
  margin: 0 0 1rem;
  color: var(--mud-palette-text-secondary);
}

.policy ul {
  padding-left: 1.25rem;
}

.policy li {
  margin-bottom: 0.4rem;
}

/* The bracketed placeholders are meant to be impossible to miss while they are still there. */
.policy strong {
  color: var(--mud-palette-text-primary);
}

/* Set quieter than the navigation above it: these are reference, not somewhere we are
   sending people. The explicit gap is needed because the links are inline. */
.site-footer__policies {
  margin-top: 0.35rem;
  gap: 1.1rem;
}

.site-footer__policies a {
  color: var(--mud-palette-text-secondary);
  text-decoration: none;
}

.site-footer__policies a:hover,
.site-footer__policies a:focus-visible {
  color: var(--mud-palette-text-primary);
  text-decoration: underline;
}

/* The rights confirmation: set apart from the preference tick boxes above it, because it is a
   statement about someone else's property rather than a choice about this order. */
.rights-confirmation {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--mud-palette-background-gray);
  border: 1px solid var(--mud-palette-lines-default);
}

.rights-confirmation__note {
  display: block;
  margin-left: 2.9rem;
}