/* THE QUOTE DESIGNS — one definition, editor and site.
 *
 * A writer picks a design from the same dropdown as Paragraph, types the
 * quote, and it looks the same in the editor as it does on the page. That is
 * only true because BOTH load this file: the editor through TinyMCE's
 * content_css, the site through its own head. One stylesheet, two places that
 * read it, so a design cannot look one way while it is being written and
 * another way once it is published.
 *
 * Ruled by Vivek, 2026-09-07: "we had the quotes in there and design for
 * quotes that we had defined so they will show up differently in various
 * designs... we them like this so we can pick the designs from dropdown and
 * add content and save the blogs."
 *
 * EVERY DESIGN IS ONE CLASS ON A <blockquote>, so what a writer produces is a
 * blockquote with a class -- valid, readable, and portable if a design is ever
 * redrawn. The marks, rules and panels are drawn in CSS rather than typed in,
 * so nothing depends on the writer arranging anything.
 *
 * THE COLOURS ARE THE SITE'S OWN. A quote on a business's page wears that
 * business's palette, not this console's -- a tenant's palette is data. Each
 * design reads --quote-accent, falling back to a neutral where a theme has not
 * set one.
 */

.yg-quote {
    --quote-accent: var(--main-color-one, #6b7a8f);
    --quote-ink: var(--paragraph-color, #333);
    --quote-panel: rgba(0, 0, 0, .04);

    position: relative;
    margin: 2rem 0;
    padding: 0;
    border: 0;
    color: var(--quote-ink);
    font-style: normal;
}

.yg-quote p { margin: 0 0 .75rem; }
.yg-quote p:last-child { margin-bottom: 0; }

/* The attribution, however a design places it. A writer types it as the last
   line and marks it with <cite>. */
.yg-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: .875em;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- 1. SIDE RULE -------------------------------------------------------
   The quiet one: a panel with a coloured edge. For a quote inside a long
   article, where anything louder interrupts the reading. */
.yg-quote--rule {
    padding: 1.25rem 1.5rem;
    background: var(--quote-panel);
    border-left: 4px solid var(--quote-accent);
}

.yg-quote--rule::before {
    content: "\201C";
    display: block;
    margin-bottom: -.5rem;
    color: var(--quote-accent);
    font: 700 2.5rem/1 Georgia, serif;
}

/* ---- 2. BIG MARK --------------------------------------------------------
   An oversized quote mark set BEHIND the words, with a short rule above. */
.yg-quote--mark {
    padding: 2rem 0 0 3.5rem;
}

.yg-quote--mark::before {
    content: "\201C";
    position: absolute;
    top: -.5rem;
    left: 0;
    z-index: 0;
    color: var(--quote-accent);
    opacity: .18;
    font: 700 8rem/1 Georgia, serif;
    pointer-events: none;
}

.yg-quote--mark > * { position: relative; z-index: 1; }

.yg-quote--mark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 3.5rem;
    width: 8rem;
    height: 3px;
    background: var(--quote-accent);
}

/* ---- 3. CIRCLE ----------------------------------------------------------
   The mark in a filled circle above the words, everything centred. The one
   that stands alone between two sections. */
.yg-quote--circle {
    /* The circle is 4.5rem tall and starts 1rem down, so the words start
       6.75rem down -- at 4.5rem the mark sat on top of the first line. */
    padding: 6.75rem 1.5rem 1.5rem;
    background: var(--quote-panel);
    text-align: center;
    font-size: 1.25em;
    line-height: 1.6;
}

.yg-quote--circle::before {
    content: "\201D";
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    padding-top: 1.25rem;
    border-radius: 50%;
    background: var(--quote-accent);
    color: #fff;
    font: 700 3rem/1 Georgia, serif;
}

.yg-quote--circle cite { text-align: center; }

/* ---- 4. CARD ------------------------------------------------------------
   A dark panel with a mark at each end -- the pull quote meant to be seen from
   across the room. */
.yg-quote--card {
    padding: 2.5rem 3.5rem;
    background: #2b2b2b;
    color: #fff;
    border-radius: .25rem;
    text-align: center;
    font-size: 1.15em;
}

.yg-quote--card::before,
.yg-quote--card::after {
    position: absolute;
    color: rgba(255, 255, 255, .35);
    font: 700 4rem/1 Georgia, serif;
}

.yg-quote--card::before { content: "\201C"; top: 1rem; left: 1.25rem; }
.yg-quote--card::after  { content: "\201D"; bottom: 0; right: 1.25rem; }

.yg-quote--card cite { color: rgba(255, 255, 255, .85); }

/* ---- 5. COMPACT ---------------------------------------------------------
   The small one: a narrow card that sits beside the text rather than
   interrupting it. Floated on a wide screen, full width on a narrow one. */
.yg-quote--compact {
    max-width: 18rem;
    padding: 1.5rem;
    background: #2b2b2b;
    color: #fff;
    border-radius: 1.25rem;
    font-size: .95em;
}

.yg-quote--compact::before {
    content: "\201C";
    display: block;
    color: rgba(255, 255, 255, .5);
    font: 700 2.5rem/1 Georgia, serif;
}

.yg-quote--compact cite { color: rgba(255, 255, 255, .8); }

/* ---- 6. PICTURE ---------------------------------------------------------
   THE OLD "QUOTE + IMAGE", MADE A DESIGN LIKE THE OTHERS.
   Vivek, 2026-09-07, choosing to fold the toolbar's quote system into this one.

   It was a separate system: two toolbar buttons, a dialog, a Bootstrap grid
   written into the article, and a second stylesheet kept in two copies. It
   could do one thing none of these could -- carry a picture -- and in exchange
   it gave up everything these have: it was always full width, it had no
   designs to choose between, and the article stopped dead above it.

   As a design it keeps the picture AND gets the rest: the widths, and the
   article running down the side of it.

   THE RED IS DELIBERATE HERE. Every other design in this file reads
   --quote-accent, which falls back to a neutral slate when a theme has set no
   palette. This one falls back to the red, because the red rule IS what this
   design has always looked like and is the thing Vivek picked it out for. A
   tenant with a palette still gets their own colour -- the fallback only
   decides what happens when nobody has said. */
.yg-quote--picture {
    --quote-accent: var(--main-color-one, rgb(255, 0, 0));

    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.yg-quote--picture img {
    flex: 0 0 34%;
    max-width: 34%;
    height: auto;
    display: block;
    margin: 0;
}

/* The words: the rule down the right and the two caps that go with it, which
   is the mark from the old design, drawn here instead of typed in. */
.yg-quote--picture > p,
.yg-quote--picture > div {
    position: relative;
    flex: 1;
    margin: 0;
    padding: 1rem 1.25rem 1rem 0;
    text-align: right;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.45;
    border-right: 5px solid var(--quote-accent);
}

.yg-quote--picture > p::before,
.yg-quote--picture > p::after,
.yg-quote--picture > div::before,
.yg-quote--picture > div::after {
    content: "";
    position: absolute;
    right: 0;
    height: 5px;
    background: var(--quote-accent);
}

.yg-quote--picture > p::before,
.yg-quote--picture > div::before { top: 0; width: 12rem; }

.yg-quote--picture > p::after,
.yg-quote--picture > div::after { bottom: 0; width: 6rem; }

/* AT HALF WIDTH THERE IS NO ROOM FOR TWO COLUMNS. 45% of an article column is
   about 16rem: a picture and a quote side by side inside that would be four
   words to a line. So it stacks, the picture on top, and the whole thing still
   floats with the article reading down beside it -- which is the point of
   folding this in. */
.yg-quote--picture.yg-quote--half {
    display: block;
}

.yg-quote--picture.yg-quote--half img {
    max-width: 100%;
    flex: none;
    margin-bottom: 1rem;
}

.yg-quote--picture.yg-quote--half > p,
.yg-quote--picture.yg-quote--half > div {
    font-size: 1.05em;
}

/* Narrow screens stack it for the same reason. */
@media (max-width: 30rem) {
    .yg-quote--picture { display: block; }

    .yg-quote--picture img { max-width: 100%; margin-bottom: 1rem; }
}

/* ---- HOW WIDE, WHICHEVER DESIGN -----------------------------------------
   Ruled by Vivek, 2026-09-07: "depending on the content, they can acquire half
   a width, or they can be a full width."

   Width is a SEPARATE choice from design, so the two do not multiply: five
   designs and two widths are seven entries in the dropdown, not ten. A short
   line beside the text is half; a paragraph somebody should stop and read is
   full.

   Full is the default -- a quote with no width chosen behaves as it always
   has, so nothing already written changes. */
.yg-quote--full {
    width: 100%;
    float: none;
    max-width: none;
}

/* 30rem, not 48rem. The breakpoint has to be the width of the COLUMN the
   quote is in, and the editor's own writing area is about 37rem -- at 48rem
   the float never applied there, so a writer picking "half width" saw a
   full-width quote and no way to tell it had worked. Below 30rem there is
   genuinely no room for two columns and it stacks. */
@media (min-width: 30rem) {
    /* Half sits IN the text, with the article running beside it. */
    .yg-quote--half {
        float: right;
        width: 45%;
        max-width: 45%;
        margin: .5rem 0 1.5rem 2rem;
    }

    /* Sitting on the left instead, for a spread that alternates. */
    .yg-quote--half.yg-quote--left {
        float: left;
        margin: .5rem 2rem 1.5rem 0;
    }

    /* The compact design is a half-width shape by nature; it keeps that when
       no width has been chosen, and obeys the choice when one has. */
    .yg-quote--compact:not(.yg-quote--full) {
        float: right;
        margin: .5rem 0 1.5rem 2rem;
    }
}

/* THE TEXT RUNS BESIDE IT — that is the whole point of a half-width quote:
   the quote takes one half, the article keeps reading down the other.
   Ruled by Vivek, 2026-09-07: "when half width content should go on side of
   it - it can be on right half or left half."

   SO NOTHING NEXT TO IT CLEARS. A clear on the following element would push
   the article below the quote and leave the other half empty, which is a
   full-width quote with a hole beside it.

   The clearing belongs at the END of the article, so a quote near the last
   paragraph cannot hang out of the bottom of it. */
.yg-quote__flow::after,
.blog-details-content::after,
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* A quote carrying a picture: the image is the writer's, dropped in from the
   media library, and every design centres it above the words as a round
   portrait.

   EXCEPT THE PICTURE DESIGN, which is excluded by name. Its image is not a
   portrait above the words -- it is the picture beside them, rectangular and
   at a third of the width, and it is the whole point of that design. Left
   unscoped, this rule sat further down the file, won on order, and turned it
   into a full-width circle with the quote squeezed into a strip beside it. */
.yg-quote:not(.yg-quote--picture) img {
    display: block;
    margin: 0 auto 1.25rem;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}