/**
 * Stylesheet: Codeally - PDF Link
 */

/* ==========================================================================
   1. Typography & Thumbnail Sizing Scales
   ========================================================================== */

:where(.wp-block-group, .wp-block-cdly-pdf-link).has-small-font-size {
  --cdly-pdf-thumb-width: var(--wp--preset--spacing--60, 2.25rem);
  --cdly-pdf-gap: var(--wp--preset--spacing--20, 0.44rem);
}
:where(.wp-block-group, .wp-block-cdly-pdf-link).has-medium-font-size {
  --cdly-pdf-thumb-width: var(--wp--preset--spacing--70, 3.38rem);
  --cdly-pdf-gap: var(--wp--preset--spacing--30, 0.67rem);
}
:where(.wp-block-group, .wp-block-cdly-pdf-link).has-large-font-size {
  --cdly-pdf-thumb-width: var(--wp--preset--spacing--80, 5.06rem);
  --cdly-pdf-gap: var(--wp--preset--spacing--50, 1rem);
}
:where(.wp-block-group, .wp-block-cdly-pdf-link).has-x-large-font-size {
  --cdly-pdf-thumb-width: var(--wp--preset--spacing--90, 7.59rem);
  --cdly-pdf-gap: var(--wp--preset--spacing--60, 2.25rem);
}
:where(.wp-block-group, .wp-block-cdly-pdf-link).has-xx-large-font-size {
  --cdly-pdf-thumb-width: var(--wp--preset--spacing--100, 11.38rem);
  --cdly-pdf-gap: var(--wp--preset--spacing--70, 3.38rem);
}

/* Vertical Alignment Variants (Row Layouts) */
:where(.wp-block-cdly-pdf-link).is-style-top {
  --cdly-pdf-align: flex-start;
}
:where(.wp-block-cdly-pdf-link).is-style-center {
  --cdly-pdf-align: center;
}
:where(.wp-block-cdly-pdf-link).is-style-bottom {
  --cdly-pdf-align: flex-end;
}

/* Below Variant (Column Layout) */
:where(.wp-block-cdly-pdf-link).is-style-below {
  --cdly-pdf-direction: column;
  --cdly-pdf-align-self: flex-end;
  --cdly-pdf-align: center;
  --cdly-pdf-gap: var(--wp--preset--spacing--20);
  --cdly-pdf-text-align: center;
  --cdly-pdf-font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   2. Block Root & Visual Thumbnail
   ========================================================================== */

.wp-block-cdly-pdf-link {
  --_thumb-width: var(
    --cdly-pdf-thumb-width,
    var(--wp--preset--spacing--70, 3.38rem)
  );
  --_gap: var(--cdly-pdf-gap, var(--wp--preset--spacing--30, 0.67rem));
  --_shadow: var(
    --cdly-pdf-shadow,
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.06))
      drop-shadow(0 4px 5px rgba(0, 0, 0, 0.08))
  );
  --_hover-effect: var(--cdly-pdf-hover-effect, saturate(115%) contrast(115%));

  display: flex;
  flex-direction: var(--cdly-pdf-direction, row);
  align-self: var(--cdly-pdf-align-self, inherit);
  align-items: var(--cdly-pdf-align, flex-start);
  gap: var(--_gap);
  text-align: var(--cdly-pdf-text-align, inherit);
  box-sizing: border-box;
}

/* Thumbnail Visual (Bottom Layer) */
.wp-block-cdly-pdf-link::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: var(--_thumb-width);
  aspect-ratio: var(--cdly-pdf-thumb-ratio, 192 / 272);
  background: var(--cdly-pdf-thumb-url) top center / contain no-repeat;
  border-radius: 2px;
  filter: var(--_shadow);
  transition: filter 0.15s ease;
}

/* ==========================================================================
   3. Link & Clickable Hit-Box
   ========================================================================== */

.cdly-pdf-link__link {
  position: relative; /* Restricts hit-box relative to text position, respecting container padding */
  font-size: var(--cdly-pdf-font-size);
}

/* Base Hit-Box (Default Row Layouts: top/center/bottom) */
.cdly-pdf-link__link::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(100% + var(--_gap));
  width: var(--_thumb-width);
  aspect-ratio: var(--cdly-pdf-thumb-ratio, 192 / 272);
  z-index: 1;
  cursor: pointer;
}

/* Alignment Adjustments for Row Layouts */
:where(.wp-block-cdly-pdf-link).is-style-top .cdly-pdf-link__link::before {
  top: 0;
}
:where(.wp-block-cdly-pdf-link).is-style-center .cdly-pdf-link__link::before {
  top: 50%;
  transform: translateY(-50%);
}
:where(.wp-block-cdly-pdf-link).is-style-bottom .cdly-pdf-link__link::before {
  bottom: 0;
}

/* Hit-Box Override for Column Layout (Link Below) */
:where(.wp-block-cdly-pdf-link).is-style-below .cdly-pdf-link__link::before {
  top: auto;
  bottom: calc(100% + var(--_gap));
  inset-inline-end: auto;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   4. Interactions & Editor Overrides
   ========================================================================== */

.cdly-pdf-link__link:hover {
  text-decoration: underline;
}
.wp-block-cdly-pdf-link:has(.cdly-pdf-link__link:hover)::before {
  filter: var(--_shadow) var(--_hover-effect);
}
.editor-styles-wrapper .cdly-pdf-link__link {
  pointer-events: none;
}