/*
  Ceramigeek Academy — the course destination.

  Premium editorial throughout: an ink hero, a numbered syllabus, uneven project scales on paper and
  the teaching badges.

  The open-notebook treatment that used to sit below the hero was removed at the owner is request. It
  carried course curriculum - modules, projects, the Hotmart note - which belongs to the course
  PRODUCT page, and it made an institutional page read as a course sales document.

  There is no purchase control on this page at all, so there is no cart styling and no offer styling
  here. The page discovers; the product page sells.
*/

/* =========================================================================
   HERO
   ========================================================================= */
.academy-hero__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

.academy-hero__text {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
}

/* Two or three lines, not four: the title is long in both cultures, so it takes the 3xl step and a
   wider measure rather than the display-hero size. */
.academy-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
    max-inline-size: 24ch;
    margin: 0;
}

.academy-hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-on-deep-strong);
    max-inline-size: var(--measure);
    margin: 0;
}

.academy-hero__sub {
    color: var(--color-on-deep-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

/* The identity badge is square artwork on a white ground: it gets a porcelain plate so the white
   never bleeds into the ink section, and `contain` so it is never cropped or stretched. */
.academy-hero__media {
    margin: 0;
    justify-self: center;
    inline-size: min(100%, 26rem);
    padding: var(--space-lg);
    background: var(--cg-paper);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.academy-hero__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

@media (min-width: 62rem) {
    .academy-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-3xl); }
}

/* =========================================================================
   THE OFFER CONTROL (external / Hotmart only)
   ========================================================================= */
.academy-offer {
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
    margin-block-start: var(--space-sm);
}

.academy-offer__note,
.academy-offer__unavailable {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin: 0;
    max-inline-size: 36ch;
}

.on-ink .academy-offer__note,
.on-ink .academy-offer__unavailable { color: var(--color-on-deep-muted); }

.academy-offer__unavailable {
    padding-inline-start: var(--space-sm);
    border-inline-start: 3px solid var(--color-accent);
    font-size: var(--text-sm);
}

/* =========================================================================
   WHAT YOU WILL LEARN — a numbered syllabus on ink
   ========================================================================= */
.learn-list {
    display: grid;
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: learn;
}

.learn-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--color-on-deep-border);
    counter-increment: learn;
}

.learn-list__item:last-child { border-block-end: 0; padding-block-end: 0; }

.learn-list__num::before {
    content: counter(learn, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-accent-on-deep);
}

.learn-list__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-on-deep-strong);
    margin: 0 0 var(--space-2xs);
}

.learn-list__body {
    color: var(--color-on-deep-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

@media (min-width: 62rem) {
    .learn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); }
}

/* =========================================================================
   GUIDED PROJECTS — uneven editorial scales
   ========================================================================= */
.project-list {
    display: grid;
    gap: var(--space-2xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.project {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

/* No photograph of a guided project is approved yet, so the media slot is a modest branded plate
   rather than a full-bleed frame — three big empty rectangles would read as broken layout, not as
   editorial restraint. The widths still differ per project so the rhythm stays uneven. */
.project__media {
    margin: 0;
    inline-size: min(100%, 20rem);
}

.project__media .media-pending {
    min-block-size: 0;
    padding: var(--space-lg);
    aspect-ratio: var(--ratio-portrait);
}

/* A project photo the owner uploaded fills the same portrait frame the plate used, edge to edge. */
.project__media--photo img {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--ratio-portrait);
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.project__text { display: grid; gap: var(--space-xs); justify-items: start; }

.project__level {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--cg-white);
    background: var(--cg-black);
    padding: 0.25rem var(--space-sm);
    border-radius: var(--radius-pill);
}

.project__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-strong);
    margin: 0;
}

.project__body {
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

@media (min-width: 56rem) {
    /* Alternating sides and deliberately different media widths, so three projects never read as a
       uniform three-up card row. The text column is bounded and the pair is packed to one edge, so a
       short description never leaves a lake of empty page beside it. */
    .project {
        grid-template-columns: auto minmax(0, 30rem);
        gap: var(--space-2xl);
        justify-content: start;
    }

    .project:nth-child(1) .project__media { inline-size: 16rem; }

    .project:nth-child(2) {
        grid-template-columns: minmax(0, 30rem) auto;
        justify-content: end;
    }

    .project:nth-child(2) .project__media { order: 2; inline-size: 13rem; }
    .project:nth-child(3) .project__media { inline-size: 19rem; }
}

.academy-note {
    margin-block-start: var(--space-xl);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--color-accent);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
}

.on-ink .academy-note {
    border-inline-start-color: var(--color-accent-on-deep);
    color: var(--color-on-deep-muted);
}

/* =========================================================================
   MODULE LEDGER
   ========================================================================= */
.module-list {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.module {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    padding-block: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
}

.module:last-child { border-block-end: 1px solid var(--color-border); }

.module__step {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

.module__body { color: var(--color-ink); margin: 0; }

/* =========================================================================
   BONUSES
   ========================================================================= */
.bonus-list {
    display: grid;
    gap: var(--space-xl);
}

.bonus {
    display: grid;
    gap: var(--space-xs);
    padding-block-start: var(--space-md);
    border-block-start: 3px solid var(--cg-red);
}

.bonus__mark {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

.bonus__title {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-strong);
    margin: 0;
}

.bonus__body { color: var(--color-ink-muted); max-inline-size: var(--measure); margin: 0; }

@media (min-width: 56rem) {
    .bonus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
}

/* =========================================================================
   TEACHER + AUDIENCE (the two identity badges)
   ========================================================================= */
.academy-teacher__inner,
.academy-audience__inner {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

.academy-teacher__text,
.academy-audience__inner > div {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    align-content: start;
}

.academy-teacher__sub {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-on-deep-strong);
    margin: var(--space-sm) 0 0;
}

/* Both badges are square white artwork: plate + contain, never cropped, never stretched. */
.academy-teacher__media,
.academy-audience__media {
    margin: 0;
    justify-self: center;
    inline-size: min(100%, 24rem);
    padding: var(--space-lg);
    background: var(--cg-paper);
    border-radius: var(--radius-xl);
}

.academy-teacher__media { box-shadow: var(--shadow-lg); }

.academy-audience__media {
    background: var(--cg-white);
    box-shadow: var(--shadow-md);
}

.academy-teacher__media img,
.academy-audience__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.audience-list {
    display: grid;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    max-inline-size: var(--measure);
}

.audience-list li {
    position: relative;
    padding-inline-start: var(--space-lg);
    color: var(--color-ink);
}

.audience-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.65em;
    inline-size: var(--space-sm);
    block-size: 2px;
    background: var(--cg-red);
}

@media (min-width: 62rem) {
    .academy-teacher__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); }
    .academy-audience__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-3xl); }
}

/* =========================================================================
   MOLD RELATION + FAQ + FINAL CTA
   ========================================================================= */
.academy-mold__inner > div {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    max-inline-size: var(--measure-wide);
}

.faq-list { display: grid; gap: 0; }

.faq {
    border-block-start: 1px solid var(--color-border);
}

.faq:last-child { border-block-end: 1px solid var(--color-border); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-strong);
}

.faq__question::-webkit-details-marker { display: none; }

/* A plus that becomes a minus — the whole disclosure affordance, no icon font. */
.faq__question::after {
    content: "+";
    flex: none;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--color-accent);
}

.faq[open] .faq__question::after { content: "–"; }

.faq__answer {
    padding-block-end: var(--space-lg);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

.academy-final__inner {
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
}

.academy-final__inner .lead { max-inline-size: var(--measure); }

.academy-final__inner .academy-offer { justify-items: center; }

.academy-final__disclosure {
    font-size: var(--text-xs);
    color: var(--color-on-deep-muted);
    max-inline-size: var(--measure-narrow);
    margin: 0;
}

/* THE OWNER'S OWN PHOTOGRAPH. The plates above exist to show the shipped badges whole (square white
   artwork: paper ground, padding, contain). A photograph she uploads is not a badge: it fills the
   frame edge to edge, cropped to it, with no paper border around it (September 2026). */
.academy-hero__media--photo,
.academy-teacher__media--photo,
.academy-audience__media--photo {
    padding: 0;
    background: none;
    overflow: hidden;
}

.academy-hero__media--photo img,
.academy-teacher__media--photo img,
.academy-audience__media--photo img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: inherit;
}

/* =========================================================================
   REDESIGN LAYER — the Academy as a studio class
   ========================================================================= */

/* The shared editorial title and body used by the teacher and mould bands. They lived only in
   home.css, which this page does not load, so the two bands fell back to plain type. */
.academy-teacher .feature__title,
.academy-mold .feature__title {
    font-size: var(--text-2xl);
    font-stretch: 108%;
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.academy-teacher .feature__body,
.academy-mold .feature__body { font-size: var(--text-lg); color: var(--color-ink-muted); max-inline-size: var(--measure); }
.academy-teacher .feature__body { color: var(--color-on-deep); }

/* The opening: wider, heavier, on the kiln floor. */
.academy-hero { overflow: hidden; }

.academy-hero__title {
    font-size: clamp(2.1rem, 1.1rem + 3.1vw, 3.9rem);
    font-stretch: 110%;
    max-inline-size: 20ch;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.academy-hero__media--photo img { border-radius: var(--radius-xl); }

/* Guided projects answer the pointer like a piece turned in the hand. */
.project__media { transition: transform 700ms var(--ease-out), box-shadow 700ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .project:hover .project__media { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 34px 60px -40px rgb(20 14 12 / 0.6); }
}

.project__level {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.project__level::before {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: var(--heat-gradient);
}

/* The last call: a big heading on the kiln floor, the button magnetic (interactions.js). */
.academy-final { overflow: hidden; padding-block: clamp(5rem, 3rem + 8vw, 10rem); }

.academy-final .display {
    font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.4rem);
    font-stretch: 116%;
    font-weight: 900;
    max-inline-size: 16ch;
    line-height: 0.95;
}

/* =========================================================================
   LESS SCROLL, MORE PAGE (owner request, 30/09/2026)
   The Academy stops being a column of full-height bands: the syllabus is a book you flip through,
   the three projects stand side by side, and the bands sit closer together.
   ========================================================================= */
.inner-heads .academy-projects,
.inner-heads .academy-learn,
.inner-heads .academy-journey,
.inner-heads .academy-teacher,
.inner-heads .academy-audience,
.inner-heads .academy-mold,
.inner-heads .academy-products { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* ---- The syllabus -------------------------------------------------------------------------------
   Without the script: the seven items listed. With it: the seven titles on the left, one item open
   in a large card on the right, advancing on its own with a heat line on the current title. */
.academy-learn__book .learn-list { display: grid; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }

.academy-learn__book .learn-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.academy-learn__num-plain,
.academy-learn__book .learn-list__num::before { content: none; }

.academy-learn__book .learn-list__num {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    line-height: 1;
    color: var(--cg-red-on-dark);
    font-variant-numeric: tabular-nums;
}

.academy-learn__book.is-tabbed { display: grid; gap: var(--space-lg); }
.academy-learn__book.is-tabbed .learn-list { grid-template-areas: "panel"; grid-template-columns: minmax(0, 1fr); gap: 0; }
.academy-learn__book.is-tabbed .learn-list > .learn-list__item { grid-area: panel; }

.academy-learn__book.is-tabbed .learn-list > .learn-list__item[hidden] {
    display: grid;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* The open item: a raised card on the kiln black, its number huge and hollow behind the words. */
.academy-learn__book.is-tabbed .learn-list__item {
    position: relative;
    grid-template-columns: 1fr;
    align-content: end;
    min-block-size: 22rem;
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    border: 1px solid var(--color-on-deep-border);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(90% 70% at 100% 0%, var(--kiln-glow-soft), transparent 60%),
        #1c1918;
    overflow: hidden;
}

.academy-learn__book.is-tabbed .learn-list__num {
    position: absolute;
    inset-block-start: -0.12em;
    inset-inline-end: 0.08em;
    font-size: clamp(7rem, 4rem + 9vw, 12rem);
    font-stretch: 125%;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cg-red-on-dark) 55%, transparent);
    pointer-events: none;
}

.academy-learn__book.is-tabbed .learn-list__title {
    position: relative;
    font-size: var(--text-2xl);
    font-stretch: 110%;
    font-weight: var(--weight-black);
    line-height: 1.05;
    margin-block-end: var(--space-sm);
}

.academy-learn__book.is-tabbed .learn-list__body { position: relative; font-size: var(--text-lg); color: var(--color-on-deep); }

/* The index of titles, on ink. */
.academy-learn__index .tabs__tab {
    border-color: var(--color-on-deep-border);
    background: rgb(255 255 255 / 0.03);
    color: var(--color-on-deep-muted);
}

.academy-learn__index .tabs__tab:hover { color: var(--color-on-deep-strong); border-color: rgb(255 255 255 / 0.3); }

.academy-learn__index .tabs__tab[aria-selected="true"] {
    background: var(--cg-paper);
    border-color: var(--cg-paper);
    color: var(--cg-black);
}

.academy-learn__index .tabs__tab[aria-selected="true"] .tabs__num { color: var(--cg-red); }

@media (min-width: 62rem) {
    .academy-learn__book.is-tabbed { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); align-items: stretch; }
    .academy-learn__index .tabs__bar { flex-direction: column; overflow: visible; margin: 0; padding: 0; }
    .academy-learn__index .tabs__tab { white-space: normal; border-radius: var(--radius-lg); padding: 0.85rem 1.1rem; }
    .academy-learn__book.is-tabbed .learn-list__item { min-block-size: 100%; }
}

/* ---- The three projects side by side ------------------------------------------------------------ */
@media (min-width: 56rem) {
    .academy-projects .project-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
        align-items: start;
    }

    .academy-projects .project { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    .academy-projects .project:nth-child(n) .project__media { inline-size: 100%; order: 0; }
    .academy-projects .project:nth-child(2) { margin-block-start: var(--space-2xl); }
}

/* A grid track grows to its content's min-content width, and a tab bar of nowrap titles has a very
   wide one — which pushed the phone layout to 1500px. The tracks may shrink; the bar scrolls. */
@media (max-width: 61.99rem) {
    .academy-learn__book.is-tabbed { grid-template-columns: minmax(0, 1fr); }
}

.academy-learn__book.is-tabbed > * { min-inline-size: 0; }

@media (min-width: 62rem) {
    .academy-learn__book.is-tabbed .learn-list { grid-template-columns: minmax(0, 1fr); }
}

/* "Ver o curso em detalhe" while the course is hidden (owner, 02/10/2026): the button opens a note
   that the course is in development instead of an unfinished course page. */
.academy-soon { display: grid; justify-items: center; gap: var(--space-md); }
.academy-soon > summary { list-style: none; cursor: pointer; }
.academy-soon > summary::-webkit-details-marker { display: none; }
.academy-soon__note {
    max-inline-size: 34rem;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-on-deep-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-on-deep, #fff);
    text-align: center;
}
.academy-soon__note p { margin: 0; }