/* Hilton Head listings insert. Locked palette. Fraunces / Figtree only. */
.insert-page {
  --sand: #f6f1e7;
  --shell: #fffdf8;
  --tide: #0a3358;
  --ink: #152433;
  --sea: #1f6fa5;
  --coral: #d96b4c;
  --insert-btn: #b85236;
}

.insert-page .page-hero {
  padding: 1.35rem 0 0.35rem;
}

.insert-lede {
  max-width: 36rem;
}

.insert-page .section:has(.insert-specimens) {
  padding: 0;
}

.insert-specimens {
  display: none;
}

.insert-page #listings.section {
  padding-top: 0.7rem;
  padding-bottom: 2rem;
}

.insert-kicker {
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sea);
}

.insert-well {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.insert-well p {
  margin: 0;
}

.insert-listing {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem 1.1rem;
}

.insert-template-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tide);
  margin: 0 0 0.35rem;
}

.insert-example {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--sea);
}

.insert-photo {
  margin: 0;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.insert-listing h3,
.insert-listing h3 a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tide);
  margin: 0.55rem 0 0.2rem;
  text-decoration: none;
}

.insert-listing h3 a:hover {
  color: var(--sea);
}

.insert-listing .insert-line {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

/* Card specimen (hidden): compact row */
.insert-listing--card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 0.95rem;
  align-items: center;
  max-width: 28rem;
  width: 100%;
}

.insert-listing--card .insert-template-label,
.insert-listing--card .insert-example {
  grid-column: 1 / -1;
}

.insert-listing--card .insert-photo {
  width: 4.5rem;
  height: 4.5rem;
}

.insert-listing--card h3,
.insert-listing--card .insert-line {
  grid-column: 2;
}

.insert-listing--card h3 {
  margin-top: 0;
}

/* Half specimen (hidden): keep 50% token */
.insert-listing--half {
  width: min(100%, 50%);
}

.insert-listing--half .insert-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Full specimen (hidden) */
.insert-listing--full {
  width: 100%;
}

.insert-listing--full .insert-photo {
  width: 100%;
  min-height: 8.5rem;
  aspect-ratio: 16 / 6;
}

/* Packed well: overlay Full (always) and photo Halves */
.insert-well .insert-listing:has(> .insert-copy) {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--sand);
  overflow: hidden;
}

.insert-well .insert-listing:has(> .insert-copy)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(
    to top,
    rgba(10, 51, 88, 0.72) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.insert-well .insert-listing:has(> .insert-copy) .insert-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.insert-well .insert-listing:has(> .insert-copy) .insert-example {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  margin: 0;
  padding: 0.12rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tide);
  background: var(--shell);
  border-radius: 4px;
}

.insert-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.7rem 0.85rem 0.7rem;
}

.insert-copy h3,
.insert-copy h3 a {
  margin: 0;
  color: var(--shell);
  line-height: 1.2;
}

.insert-copy h3 a:hover {
  color: var(--sand);
}

.insert-copy .insert-line {
  margin: 0;
  color: var(--sand);
  line-height: 1.35;
}

.insert-well .insert-listing--full {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 2.1 / 1;
  min-height: 14rem;
}

.insert-well .insert-listing--full .insert-copy h3 {
  font-size: 1.45rem;
}

.insert-well .insert-listing--full .insert-copy .insert-line {
  font-size: 0.95rem;
}

.insert-well .insert-listing--half {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.insert-well .insert-listing--half .insert-copy h3 {
  font-size: 1.12rem;
}

.insert-well .insert-listing--half .insert-copy .insert-line {
  font-size: 0.88rem;
}

/* Cards: type-only classifieds, no empty photo square */
.insert-well .insert-listing--card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  width: 100%;
  padding: 0.7rem 0.8rem 0.75rem;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.insert-well .insert-listing--card .insert-example {
  margin: 0 0 0.28rem;
  font-size: 0.7rem;
  color: var(--sea);
}

.insert-well .insert-listing--card h3,
.insert-well .insert-listing--card h3 a {
  margin: 0 0 0.12rem;
  font-size: 1.05rem;
  color: var(--tide);
}

.insert-well .insert-listing--card h3 a:hover {
  color: var(--sea);
}

.insert-well .insert-listing--card .insert-line {
  color: var(--ink);
  font-size: 0.9rem;
}

.insert-hard-no {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.insert-hard-no li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.insert-page #inquire.section {
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
}

.insert-page #inquire + .section {
  padding-top: 1.5rem;
}

[data-insert-form] {
  max-width: 28rem;
  display: grid;
  gap: 0.7rem;
}

[data-insert-form] .insert-kicker,
[data-insert-form] [data-insert-preview] {
  max-width: none;
  width: 100%;
}

[data-insert-preview].insert-well {
  grid-template-columns: 1fr;
}

[data-insert-form] label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tide);
}

[data-insert-form] input[type="text"],
[data-insert-form] input[type="email"],
[data-insert-form] input[type="url"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--shell);
  color: var(--ink);
}

.insert-template-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  align-items: center;
}

.insert-template-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.insert-template-choice input {
  margin: 0;
}

[data-insert-form] button {
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.1rem;
  font: inherit;
  font-weight: 700;
  background: var(--insert-btn);
  color: var(--shell);
  cursor: pointer;
}

[data-insert-form] button:hover {
  background: color-mix(in srgb, var(--insert-btn) 82%, #061f36);
}

@media (max-width: 760px) {
  .insert-listing--half {
    width: 100%;
  }

  .insert-well {
    grid-template-columns: 1fr;
  }

  .insert-well .insert-listing--full {
    aspect-ratio: 16 / 9;
    min-height: 11rem;
  }

  .insert-well .insert-listing--full .insert-copy h3 {
    font-size: 1.2rem;
  }

  .insert-well .insert-listing--half .insert-copy h3 {
    font-size: 1.08rem;
  }
}