/* Elementor: CITIM Square Card widget (list of square cards with shape + title) */
@layer components {
  .CITIMSquareCard-list {
    display: grid;
    gap: var(--citim-spacing-md, 1.5rem);
    max-width: 1200px;
    margin: 0 auto;
  }

  .CITIMSquareCard,
  a.CITIMSquareCard {
    --citim-squarecard-title-size: clamp(0.75rem, 2.5vw, 1.75rem);
    --citim-squarecard-subtitle-size: clamp(1rem, 2vw, 1.25rem);
  }

  .CITIMSquareCard-list--cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .CITIMSquareCard-list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .CITIMSquareCard-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .CITIMSquareCard-list--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .CITIMSquareCard-list--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  @media (max-width: 768px) {
    .CITIMSquareCard-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .CITIMSquareCard,
  a.CITIMSquareCard {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
  }

  .CITIMSquareCard:hover {
    text-decoration: none;
    color: inherit;
  }

  .CITIMSquareCard__inner {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  .CITIMSquareCard__shape {
    position: absolute;
    inset: 0;
    translate: 25% 0;
    -webkit-mask-image: var(--citim-square-card-mask-url);
    mask-image: var(--citim-square-card-mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    overflow: hidden;
    /* Shift shape right so ~1/3 is clipped off the right edge */
    -webkit-mask-position: 72% center;
    mask-position: 72% center;
  }

  .CITIMSquareCard__shapeImg {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  .CITIMSquareCard__text {
    position: absolute;
    right: var(--citim-spacing-md, 1.5rem);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: 65%;
    width: 65%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }

  .CITIMSquareCard--title-top .CITIMSquareCard__text {
    top: var(--citim-spacing-md, 1.5rem);
    transform: none;
  }

  .CITIMSquareCard--title-center .CITIMSquareCard__text {
    top: 50%;
    transform: translateY(-50%);
  }

  .CITIMSquareCard--title-bottom .CITIMSquareCard__text {
    bottom: var(--citim-spacing-md, 1.5rem);
    top: auto;
    transform: none;
  }

  @media (max-width: 768px) {
    .CITIMSquareCard__text {
      right: 0.5rem;
    }

    .CITIMSquareCard--title-bottom .CITIMSquareCard__text {
      bottom: 0.5rem;
    }
  }

  .CITIMSquareCard__title {
    margin: 0;
    font-family: var(--citim-font-secondary, "Roboto", sans-serif);
    font-size: var(--citim-squarecard-title-size);
    font-weight: 500;
    line-height: 1.2;
    color: var(--citim-square-card-bg, #fff);
    text-align: right;
    left: auto;
  }

  .CITIMSquareCard__subtitle {
    margin: 0;
    font-family: var(--citim-font-secondary, "Roboto", sans-serif);
    font-size: var(--citim-squarecard-subtitle-size);
    font-weight: 400;
    line-height: 1.2;
    color: var(--citim-square-card-bg, #fff);
    text-align: right;
  }

  .CITIMSquareCard__linkLabel {
    font-family: var(--citim-font-secondary, "Roboto", sans-serif);
    font-size: calc(var(--citim-squarecard-subtitle-size) * 0.9);
    font-weight: 400;
    line-height: 1.2;
    color: var(--citim-square-card-bg, #fff);
    text-align: right;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
  }

  /*
   * When a subtitle is rendered, stack text over the photo area; two tight text-shadows read well and avoid filter/backdrop cost.
   */
  .CITIMSquareCard__text:has(.CITIMSquareCard__subtitle) .CITIMSquareCard__title,
  .CITIMSquareCard__text:has(.CITIMSquareCard__subtitle) .CITIMSquareCard__subtitle,
  .CITIMSquareCard__text:has(.CITIMSquareCard__subtitle) .CITIMSquareCard__linkLabel {
    text-shadow:
      0 0 1px rgb(0 0 0 / 0.85),
      0 1px 4px rgb(0 0 0 / 0.45);
  }

  .CITIMSquareCard--text-small {
    --citim-squarecard-title-size: clamp(1.05rem, 2.15vw, 1.45rem);
    --citim-squarecard-subtitle-size: clamp(0.9rem, 1.85vw, 1.1rem);
  }

  .CITIMSquareCard--text-small .CITIMSquareCard__title {
    font-size: clamp(1.05rem, 2.15vw, 1.45rem);
  }

  .CITIMSquareCard--text-small .CITIMSquareCard__subtitle {
    font-size: clamp(0.9rem, 1.85vw, 1.1rem);
  }

  .CITIMSquareCard--text-extra_small {
    --citim-squarecard-title-size: clamp(0.9rem, 1.8vw, 1.25rem);
    --citim-squarecard-subtitle-size: clamp(0.68rem, 1.35vw, 0.86rem);
  }

  .CITIMSquareCard--text-extra_small .CITIMSquareCard__title {
    font-size: clamp(0.9rem, 1.8vw, 1.25rem);
  }

  .CITIMSquareCard--text-extra_small .CITIMSquareCard__subtitle {
    font-size: clamp(0.48rem, 1.35vw, 0.86rem);
  }

  /* Card background = scheme background; shape + title-protect accent color */

  .CITIMSquareCard--scheme-lime_emeraude {
    --citim-square-card-bg: var(--citim-color-lime_light, #f4fec2);
    --citim-squarecard-accent: var(--citim-color-emeraude, #3a9980);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-lime_emeraude .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-bleu_lime {
    --citim-square-card-bg: var(--citim-color-bleu_signal, #4a75f5);
    --citim-squarecard-accent: var(--citim-color-lime_light, #f4fec2);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-bleu_lime .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-emeraude_corail {
    --citim-square-card-bg: var(--citim-color-emeraude_light, #b6e6d3);
    --citim-squarecard-accent: var(--citim-color-corail, #f29980);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-emeraude_corail .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-corail_bleu {
    --citim-square-card-bg: var(--citim-color-corail_light, #f6bfaf);
    --citim-squarecard-accent: var(--citim-color-bleu_signal, #4a75f5);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-corail_bleu .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-emeraude_lime {
    --citim-square-card-bg: var(--citim-color-emeraude, #3a9980);
    --citim-squarecard-accent: var(--citim-color-lime_light, #f4fec2);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-emeraude_lime .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-lime_bleu {
    --citim-square-card-bg: var(--citim-color-lime_light, #f4fec2);
    --citim-squarecard-accent: var(--citim-color-bleu_signal, #4a75f5);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-lime_bleu .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-corail_emeraude {
    --citim-square-card-bg: var(--citim-color-corail, #f29980);
    --citim-squarecard-accent: var(--citim-color-emeraude_light, #b6e6d3);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-corail_emeraude .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-bleu_light_emeraude {
    --citim-square-card-bg: var(--citim-color-bleu_signal_light, #d9e8ff);
    --citim-squarecard-accent: var(--citim-color-emeraude, #3a9980);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-bleu_light_emeraude .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  .CITIMSquareCard--scheme-emeraudeLight_bleu {
    --citim-square-card-bg: var(--citim-color-emeraude_light, #b6e6d3);
    --citim-squarecard-accent: var(--citim-color-bleu_signal, #4a75f5);
    background-color: var(--citim-square-card-bg);
  }
  .CITIMSquareCard--scheme-emeraudeLight_bleu .CITIMSquareCard__shape {
    background-color: var(--citim-squarecard-accent);
  }

  /* When an image is present, don't show the scheme background behind it. */
  .CITIMSquareCard__shape:has(img) {
    background-color: transparent !important;
  }

  /* Optional translucent background behind the title for image readability */
  .CITIMSquareCard--title-bg-protect .CITIMSquareCard__text {
    border-radius: 10px;
    background-color: var(--citim-squarecard-accent);
    outline: 10px solid var(--citim-squarecard-accent);
    outline-offset: 0;
    box-sizing: border-box;
    padding: 0.15rem 0.25rem;
  }

  @supports (background: color-mix(in srgb, #000 50%, transparent)) {
    .CITIMSquareCard--title-bg-protect .CITIMSquareCard__text {
      --citim-squarecard-accent-75: color-mix(in srgb, var(--citim-squarecard-accent) 75%, transparent);
      background-color: var(--citim-squarecard-accent-75);
      outline-color: var(--citim-squarecard-accent-75);
    }
  }

}