/**
 * Elle Gourmet Blocks — Recipe Roundup
 * Shared front-end + editor styles.
 * CSS custom properties are set by Fox Editor Bridge on the :root.
 */

/* ==========================================================================
   Base layout
   ========================================================================== */
.elg-recipe-roundup {
  display: flex;
  gap: 1.25rem;
  /* Center the content column against the image so the text doesn't float at
       the top when a large image makes the row much taller. Stacked layouts
       (--top, placeholder, mobile) reset this below since centering there is
       a horizontal concern. */
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #fff;
  text-decoration: none;
  --elg-recipe-roundup-image-scale: 100;
}

/* ==========================================================================
   Editor wrapper (this class is editor-only — block.php renders the card
   without it). No width is set here on purpose: --wp--style--global--content-
   size is only defined by a theme.json theme, and this is a classic theme, so
   the declaration resolved to its 100% fallback. At (0,1,0) that outranked the
   theme's own cap, `html :where(.wp-block) { max-width: 700px }`, which scores
   only (0,0,1) because :where() contributes no specificity — which is why this
   block sat wider than the rest. Left unset, the theme cap applies.
   ========================================================================== */
.elg-recipe-roundup-block {
  box-sizing: border-box;
}

.elg-recipe-roundup-block > .elg-recipe-roundup {
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */
.elg-recipe-roundup__thumbnail {
  flex: 0 0 auto;
  width: calc(150px * var(--elg-recipe-roundup-image-scale, 100) / 100);
}

.elg-recipe-roundup__thumbnail a {
  display: block;
  line-height: 0;
}

.elg-recipe-roundup__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  object-fit: cover;
}

.elg-recipe-roundup--top {
  flex-direction: column;
  align-items: flex-start;
}

.elg-recipe-roundup--top .elg-recipe-roundup__thumbnail {
  width: 100%;
}

.elg-recipe-roundup--top .elg-recipe-roundup__image {
  max-height: 420px;
}

/* ==========================================================================
   Content
   ========================================================================== */
.elg-recipe-roundup__content {
  flex: 1 1 auto;
  min-width: 0;
}

.elg-recipe-roundup__title {
  font-family: var(--font-heading, inherit);
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.elg-recipe-roundup__title a {
  text-decoration: none;
  color: inherit;
}

.elg-recipe-roundup__title a:hover {
  color: var(--accent-color, #cd202e);
}

.elg-recipe-roundup__description {
  font-size: 20px;
  font-weight: normal;
  line-height: 1.55;
  margin: 0 0 1rem;
  color: #555;
}

.elg-recipe-roundup__description strong,
.elg-recipe-roundup__description b {
  font-weight: normal;
}

/* ==========================================================================
   CTA button
   ========================================================================== */
.elg-recipe-roundup__button {
  display: inline-block;
  font-family: var(--font-heading, inherit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff !important;
  background: #000;
  padding: 10px 22px;
  border-radius: 3px;
  transition: opacity 0.2s;
  line-height: 1;
}

.elg-recipe-roundup__button:hover {
  opacity: 0.75;
  color: #fff;
}

/* ==========================================================================
   Editor: placeholder / empty state
   ========================================================================== */
.elg-recipe-roundup--placeholder {
  flex-direction: column;
  align-items: stretch;
  border: 2px dashed #ccc;
  background: #fafafa;
}

.elg-recipe-roundup__placeholder-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.elg-recipe-roundup__placeholder-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin: 0;
}

/* ==========================================================================
   Editor: recipe search inside inspector panel
   Built on core's URLInput, but the results list and rows are styled here
   rather than inheriting core's link-popover sizing.
   ========================================================================== */
.elg-recipe-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* This is the rule that was cropping the picker in the inspector. Core sets
   `.block-editor-url-input { min-width: 300px; width: auto }` above 600px
   viewport width, sized for the link popover rather than a ~280px sidebar
   panel, so the field overflowed the panel's right edge. isFullWidth (see
   edit.js) brings core's own width: 100% back, but nothing in core clears the
   300px floor — that has to happen here. */
.elg-recipe-search .block-editor-url-input {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.elg-recipe-search input[type="text"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* Results list. These are our own classes, not core's — see the note in
   edit.js — so nothing here is fighting an inherited rule. */
.elg-recipe-search__results-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.elg-recipe-search__results {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 4px;
}

.elg-recipe-search__results.is-loading {
  opacity: 0.4;
}

/* Rows are plain <button>s, so reset the UA styling first. min-width: 0 is
   what lets the title actually truncate inside the narrow panel. */
.elg-recipe-search__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.elg-recipe-search__item:hover,
.elg-recipe-search__item[aria-selected="true"],
.elg-recipe-search__item.is-selected {
  background: #f0f0f0;
}

.elg-recipe-search__item:focus-visible {
  outline: 2px solid var(--wp-admin-theme-color, #3858e9);
  outline-offset: -2px;
}

.elg-recipe-search__thumb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  overflow: hidden;
  background: #f0f0f0;
}

.elg-recipe-search__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.elg-recipe-search__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
  .elg-recipe-roundup {
    flex-direction: column;
    align-items: flex-start;
  }

  .elg-recipe-roundup__thumbnail {
    width: 100%;
  }
}