/* ==========================================================================
   Sky Ceylon — Reviews, Cases and the Quotation Form

   FluentSnippets group: Reviews & Form | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CASES
   -------------------------------------------------------------------------- */
.skyc-cases {
  display: grid;
  gap: var(--wp--preset--spacing--48);
}

.skyc-case {
  display: grid;
  gap: var(--wp--preset--spacing--24);
  align-items: center;
}
@media (min-width: 900px) {
  .skyc-case {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--48);
  }
  /* The media column is moved rather than the copy, so the heading still comes
     first in the source order for anyone reading it linearly. */
  .skyc-case--reverse .skyc-case__media { order: 2; }
}

.skyc-case__media {
  overflow: hidden;
  border-radius: var(--wp--custom--radius-lg);
  background: var(--wp--preset--color--surface-grey);
}
.skyc-case__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.skyc-case__copy {
  display: grid;
  gap: var(--wp--preset--spacing--16);
  align-content: center;
}
.skyc-case__eyebrow {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.skyc-section--plum .skyc-case__eyebrow { color: var(--wp--preset--color--accent); }

.skyc-case__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-tight);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-case__text {
  margin: 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}

.skyc-cases__quotes { margin-top: var(--wp--preset--spacing--48); }

/* --------------------------------------------------------------------------
   2. CONTACT — map card beside the form
   -------------------------------------------------------------------------- */
.skyc-contact-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
}
@media (min-width: 960px) {
  .skyc-contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--56);
  }
}

.skyc-contact-grid__copy {
  display: grid;
  gap: var(--wp--preset--spacing--32);
  align-content: start;
}

.skyc-map-card {
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-lg);
  background: var(--wp--preset--color--base);
}
.skyc-map-card__media { background: var(--wp--preset--color--surface-grey); }
.skyc-map-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.skyc-map-card__body {
  display: grid;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--24);
}
.skyc-map-card__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-bold);
  color: var(--wp--preset--color--contrast);
}
.skyc-map-card__address {
  font-style: normal;
  font-weight: var(--wp--custom--weight-semibold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--wp--preset--color--contrast);
}
.skyc-map-card__body .skyc-prose > p + p { margin-top: var(--wp--preset--spacing--12); }

/* --------------------------------------------------------------------------
   3. FORM PANEL

   The plugin renders the fields, so these rules style whatever it produces
   rather than assuming any particular markup: inputs, selects and textareas
   are matched by element, not by class.
   -------------------------------------------------------------------------- */
.skyc-form-panel {
  display: grid;
  gap: var(--wp--preset--spacing--16);
  padding: var(--wp--preset--spacing--32);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-lg);
  background: var(--wp--preset--color--base);
  box-shadow: var(--wp--preset--shadow--md);
}
.skyc-form-panel__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-bold);
  color: var(--wp--preset--color--contrast);
}
.skyc-form-panel__note,
.skyc-form-panel__privacy {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  line-height: var(--wp--custom--leading-relaxed);
}
.skyc-form-panel__todo {
  margin: 0;
  padding: var(--wp--preset--spacing--16);
  border: 1px dashed var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-sm);
  background: var(--wp--preset--color--surface-grey);
  font-family: monospace;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

.skyc-form-panel__form label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--4);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--wp--preset--color--contrast);
}
.skyc-form-panel__form input[type="text"],
.skyc-form-panel__form input[type="email"],
.skyc-form-panel__form input[type="tel"],
.skyc-form-panel__form input[type="number"],
.skyc-form-panel__form input[type="date"],
.skyc-form-panel__form input[type="url"],
.skyc-form-panel__form select,
.skyc-form-panel__form textarea {
  width: 100%;
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-sm);
  background: var(--wp--preset--color--base);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--contrast);
}
.skyc-form-panel__form textarea { min-height: 8rem; resize: vertical; }
.skyc-form-panel__form input:focus-visible,
.skyc-form-panel__form select:focus-visible,
.skyc-form-panel__form textarea:focus-visible {
  outline: 3px solid var(--wp--custom--focus);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary);
}
.skyc-form-panel__form button[type="submit"],
.skyc-form-panel__form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
  border: 0;
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--primary);
  box-shadow: var(--wp--custom--shadow-brand);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-bold);
  color: var(--wp--preset--color--base);
  transition: background var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-form-panel__form button[type="submit"]:hover,
.skyc-form-panel__form input[type="submit"]:hover {
  background: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------------------------------
   4. EDITOR
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-case { gap: var(--wp--preset--spacing--24); }