/**
 * Photo upload field, shared by the memorial node form and the
 * "request a memorial update" webform.
 *
 * Both widgets already ship everything the design needs — thumbnail, filename,
 * remove control, drag handle, weight select, upload limits — so this file only
 * lays that markup out. No widget or element plugin is overridden.
 */

.field--name-field-photos,
.form-item-pictures {
  --ai-photo-navy: #013044;
  --ai-photo-green: #619147;
  --ai-photo-line: #e7eae3;
  --ai-photo-mist: #f6f8f4;
  --ai-photo-muted: #5d7684;
  --ai-photo-danger: #a4342c;
  --ai-photo-thumb: 88px;

  margin: 28px 0;
  font-family: "Open Sans", sans-serif;
  text-align: left;
  color: var(--ai-photo-navy);
}

.field--name-field-photos *,
.form-item-pictures * {
  text-align: left;
}

/* ---------------------------------------------------------------- Heading */

.field--name-field-photos details > summary,
.form-item-pictures > label {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ai-photo-navy);
  cursor: default;
}

.field--name-field-photos details > summary::marker,
.field--name-field-photos details > summary::-webkit-details-marker {
  content: "";
  display: none;
}

/* ------------------------------------------------------------ Helper text */

.ai-photo-help {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ai-photo-muted);
}

.ai-photo-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ai-photo-muted);
}

.ai-photo-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--ai-photo-mist);
  border: 1px solid var(--ai-photo-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-photo-navy);
  white-space: nowrap;
}

.ai-photo-count--full {
  background: #fdf3ed;
  border-color: #f0d6c6;
  color: #8a4b1f;
}

/* Core repeats the limits under the widget; the intro above already says all
   of it, and it is still built in some code paths that run after form_alter. */
.field--name-field-photos .description {
  display: none;
}

/* On the webform this is the intro text itself, printed before the widget. */
.form-item-pictures > .description,
.form-item-pictures .webform-element-description {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ai-photo-muted);
}

/* ------------------------------------------------- Selected photos: layout */

/* The multi value table is a layout table, so it is safe to drop its own
   box model and lay the rows out directly. tabledrag keeps working because
   the rows stay rows in the DOM. */
.field--name-field-photos table {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  border: 0;
  border-collapse: separate;
}

.field--name-field-photos thead {
  display: none;
}

.field--name-field-photos tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
}

.field--name-field-photos tbody tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--ai-photo-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(1, 48, 68, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field--name-field-photos tbody tr:hover {
  border-color: #cfd8cb;
  box-shadow: 0 3px 10px rgba(1, 48, 68, 0.08);
}

/* The cells only exist to satisfy the table; their children are the real
   grid items. */
.field--name-field-photos tbody td {
  display: contents;
}

/* Rows being dragged, and the row tabledrag drops in as a preview. */
.field--name-field-photos tbody tr.drag {
  border-color: var(--ai-photo-green);
  box-shadow: 0 6px 18px rgba(1, 48, 68, 0.16);
  background: var(--ai-photo-mist);
}

/* --------------------------------------------------------- Drag handle */

/* Core styles the handle as a grey "move" glyph and swaps it for a black one
   on hover, both at a higher specificity than a plain class selector, so the
   element name has to be carried through here. */
.field--name-field-photos a.tabledrag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 40px;
  margin: 0;
  padding: 0;
  float: none;
  overflow: visible;
  cursor: grab;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.field--name-field-photos a.tabledrag-handle:hover,
.field--name-field-photos a.tabledrag-handle:focus-visible {
  opacity: 1;
}

.field--name-field-photos a.tabledrag-handle:active {
  cursor: grabbing;
}

.field--name-field-photos a.tabledrag-handle .handle,
.field--name-field-photos a.tabledrag-handle:hover .handle,
.field--name-field-photos a.tabledrag-handle:focus .handle {
  width: 16px;
  height: 24px;
  margin: 0;
  padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cg fill='%23013044'%3E%3Ccircle cx='5' cy='5' r='1.6'/%3E%3Ccircle cx='11' cy='5' r='1.6'/%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='11' cy='12' r='1.6'/%3E%3Ccircle cx='5' cy='19' r='1.6'/%3E%3Ccircle cx='11' cy='19' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 24px;
}

/* --------------------------------------------- Thumbnail + file information */

/* Two shapes have to work here. Core wraps the parts in .image-preview and
   .image-widget-data; the ngc theme's own image widget template flattens them
   to a bare img plus span.file and span.file-size. Everything is placed
   explicitly so neither shape depends on auto placement. */
.field--name-field-photos tbody .image-widget {
  display: grid;
  grid-template-columns: var(--ai-photo-thumb) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  min-width: 0;
  float: none;
}

.field--name-field-photos tbody .image-widget > .image-preview,
.field--name-field-photos tbody .image-widget > img {
  grid-area: 1 / 1 / 3 / 2;
  width: var(--ai-photo-thumb);
  height: var(--ai-photo-thumb);
  margin: 0;
  padding: 0;
  float: none;
  overflow: hidden;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ai-photo-mist);
}

.field--name-field-photos .image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Core markup: one block holds the name, size and any alt/title fields. */
.field--name-field-photos tbody .image-widget > .image-widget-data {
  grid-area: 1 / 2 / 3 / 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  float: none;
}

/* Flattened markup: name and size are siblings of the img. */
.field--name-field-photos tbody .image-widget > .file {
  grid-area: 1 / 2 / 2 / 3;
  align-self: end;
}

.field--name-field-photos tbody .image-widget > .file-size {
  grid-area: 2 / 2 / 3 / 3;
  align-self: start;
}

.field--name-field-photos .file {
  display: block;
  min-width: 0;
  padding: 0;
  background: none;
}

.field--name-field-photos .file a {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ai-photo-navy);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field--name-field-photos .file a:hover {
  text-decoration: underline;
}

.field--name-field-photos .file-size {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ai-photo-muted);
}

/* Alt and title fields, when the field is configured to collect them. */
.field--name-field-photos .image-widget-data .form-item {
  margin: 6px 0 0;
}

.field--name-field-photos .image-widget-data input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--ai-photo-line);
  border-radius: 6px;
  font-size: 14px;
}

/* ---------------------------------------------------------- Weight select */

.field--name-field-photos .tabledrag-hide .form-item {
  margin: 0;
}

.field--name-field-photos select {
  padding: 7px 10px;
  border: 1px solid var(--ai-photo-line);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: var(--ai-photo-navy);
}

/* Not useful to a visitor: the drag handles are keyboard operable on their
   own (focus a handle, then arrow up or down), so the weight selects only add
   noise to a four item list. */
.field--name-field-photos .tabledrag-toggle-weight-wrapper {
  display: none;
}

/* --------------------------------------------------------- Remove button */

.field--name-field-photos input[value="Remove"],
.form-item-pictures .js-webform-file-button-remove,
.form-item-pictures input[value*="Remove"] {
  display: inline-block;
  justify-self: start;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 8px 16px 8px 34px;
  white-space: nowrap;
  border: 1px solid var(--ai-photo-line);
  border-radius: 100px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23013044' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px 14px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ai-photo-navy);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.field--name-field-photos input[value="Remove"]::after,
.form-item-pictures input[value*="Remove"]::after {
  content: none;
}

.field--name-field-photos input[value="Remove"]:hover,
.form-item-pictures .js-webform-file-button-remove:hover,
.form-item-pictures input[value*="Remove"]:hover {
  border-color: var(--ai-photo-danger);
  background-color: #fdf1f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23a4342c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px 14px;
  color: var(--ai-photo-danger);
}

/* ----------------------------------------------------------- Add photos */

.field--name-field-photos .tableresponsive-toggle-columns {
  display: none;
}

.field--name-field-photos .js-form-type-managed-file .image-widget {
  display: block;
  position: relative;
}

/* Core prints the file input plus its label as the last item of the widget. */
.field--name-field-photos > div > details > .js-form-type-managed-file,
.form-item-pictures .form-managed-file {
  margin: 0;
}

.field--name-field-photos .js-form-type-managed-file label,
.form-item-pictures .webform-file-button {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 22px 20px;
  border: 1.5px dashed #c6d1c2;
  border-radius: 12px;
  background: var(--ai-photo-mist);
  font-family: "Bree Serif", Times, Georgia, serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ai-photo-green);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field--name-field-photos .js-form-type-managed-file label::before,
.form-item-pictures .webform-file-button::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 5v12M5 11h12' stroke='%23619147' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

.field--name-field-photos .js-form-type-managed-file label:hover,
.form-item-pictures .webform-file-button:hover,
.ai-photo-dragover .js-form-type-managed-file label,
.ai-photo-dragover .webform-file-button {
  border-color: var(--ai-photo-green);
  background: #eef3ea;
}

/* Keyboard focus lands on the visually hidden input, so show the ring on the
   card the user actually sees. */
.field--name-field-photos .js-form-type-managed-file:focus-within label,
.form-item-pictures .form-managed-file:focus-within .webform-file-button {
  outline: 2px solid var(--ai-photo-green);
  outline-offset: 2px;
}

/* Hidden, but deliberately still in flow next to the add card. Taking it out
   of flow parked it near the top of the form, and both the label click and
   the focus Ajax restores afterwards scrolled the page up to reach it. */
.field--name-field-photos input[type="file"],
.form-item-pictures input[type="file"] {
  position: static;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  overflow: hidden;
}

.form-item-pictures .form-managed-file > input[type="file"] {
  order: 3;
}

/* Same story as the label below: the theme sizes every input on these forms
   (body.path-node.club .node-form input:not(...)), which put a 58px gap where
   the hidden file input sits. */
.node-form .field--name-field-photos .js-form-item.form-item.js-form-type-managed-file input[type="file"] {
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}

/* The theme floats every label in these node forms into the input
   (float-labels.css, .path-node.club .node-form .form-item label). The add
   card is a label, so it has to opt out, and that rule is specific enough to
   need matching here. */
.node-form .field--name-field-photos .js-form-item.form-item.js-form-type-managed-file label {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  padding: 22px 20px;
  background: var(--ai-photo-mist);
  font-size: 16px;
  transform: none;
}

.node-form .field--name-field-photos .js-form-item.form-item.js-form-type-managed-file label:hover,
.node-form .ai-photo-dragover .js-form-item.form-item.js-form-type-managed-file label {
  background: #eef3ea;
}

/* Webform prints the upload control before the files it has already taken.
   Reading the list first and the add card last matches the node form. */
.form-item-pictures .form-managed-file {
  display: flex;
  flex-direction: column;
}

.form-item-pictures .form-managed-file > .js-form-type-checkbox {
  order: 1;
}

.form-item-pictures .form-managed-file > input[type="submit"] {
  order: 2;
  align-self: flex-start;
  margin-bottom: 14px;
}

.form-item-pictures .form-managed-file > .webform-file-button {
  order: 3;
}

/* -------------------------------------------- Webform: selected file list */

/* The webform element has no thumbnails for anonymous visitors (see
   WebformManagedFileBase and DRUPAL-PSA-2016-003), so the list is built from
   the local previews ai_map_photo_upload.js adds, falling back to a
   placeholder tile. */
.form-item-pictures .form-managed-file > .js-form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--ai-photo-line);
  border-radius: 12px;
  background: #fff;
}

.form-item-pictures .form-managed-file > .js-form-type-checkbox label.option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ai-photo-navy);
}

.form-item-pictures .form-managed-file > .js-form-type-checkbox .file a {
  overflow: hidden;
  color: var(--ai-photo-navy);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-photo-thumb {
  display: block;
  flex: 0 0 var(--ai-photo-thumb);
  width: var(--ai-photo-thumb);
  height: var(--ai-photo-thumb);
  border-radius: 8px;
  background-color: var(--ai-photo-mist);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ai-photo-thumb--generic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%2395a8a0' stroke-width='1.6'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 15l-5-4-4.5 5-2-1.5L3 19'/%3E%3C/svg%3E");
  background-size: 34px 34px;
}

/* The checkbox selects a file for "Remove selected". Keep it, make it read as
   a control on the card rather than a stray box. */
.form-item-pictures .form-managed-file > .js-form-type-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ai-photo-green);
  cursor: pointer;
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 560px) {
  .field--name-field-photos {
    --ai-photo-thumb: 64px;
  }

  .field--name-field-photos tbody tr {
    grid-template-columns: auto var(--ai-photo-thumb) minmax(0, 1fr);
    row-gap: 10px;
  }

  /* Push the weight select and Remove onto their own line. */
  .field--name-field-photos tbody td:last-child,
  .field--name-field-photos tbody td.tabledrag-hide {
    display: block;
    grid-column: 1 / -1;
  }

  .field--name-field-photos input[value="Remove"] {
    width: 100%;
  }
}