Ankhena

Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.

Не нужно помещать кнопку на инпут.
Нужно задать фон оборачивающему их div.

Вы серьезно сплошной оранжевый цвет собрались задавать картинкой?

Варианта два:
1. Если логотип включает в себя оранжевую часть, то это одна картинка, желательно в формате SVG. Причем это <img>
Судя по тому, как написаны буквы названия, то и они являются частью лого.
2. Если логотип это только "буква", то оранжевое это background-color и border-radius. А сам логотип это снова тег <img>

Если всё же вам встретится необходимость сделать множественные фоны, то они просто пишутся через запятую.
Самый первый - верхний, последний - нижний. В серединке соответственно.

Потому что ваши блоки называются adv и режутся блокировщиками рекламы.

Гридами https://jsfiddle.net/2z0ohg3k/

Можно задать картинке vertical-align: top
Можно задать ей display: block
Можно обертке font-size: 0 (не люблю такой способ)

Убрать float left.
И вообще не использовать его не по назначению.
А назначение - обтекание одного элемента другими.
Для построение сеток используйте флексы или гриды.

input:focus {
  outline: none;
  /* сюда добавить свои стили, чтобы человек видел, что инпут в фокусе */
}

Если сетка повторяющаяся то через nth-child задаете сколько строк и столбцов должны занимать элементы.
Если нет, то классы.

nth-child

классы

Для другого вопроса было, суть одна. Просто grid.
https://jsfiddle.net/Ankhena/ndu0k365/

https://developer.mozilla.org/ru/docs/Web/CSS/alig...

align-content: flex-start;

Используйте неразрывный пробел  

1) На чем верстают адаптивные современные сайты и приложения, на флексах, гридах или еще чем-то?

Да
Пояснять нужно?

2) Может кто подскажет лайфхаки, как быстро освежить память в HTML/CSS. Знания есть, но уже подзабыл, нужен какой-то быстрый курс, видео или книга по основам, чтобы освежить память.

Если время потратить - то любой курс, видео или книга.
Если делать - то начать делать.

Потому что у кнопок разный font-size, а выравнивание по базовой линии шрифта.

Читать про line-height
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

Читать про блочную модель https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
Чтобы не пытаться задавать размеры инлайнам.

Вам сюда
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

И ещё за флексами.

Пытался прописать fozt-size: 0, но и картинка пропадает

С чего бы это? https://jsfiddle.net/qLjr9f7w/ (Либо у вас просто опечатка. Используйте хороший редактор с подсветкой кода, он будет показывать ошибки)

Но font-size: 0 не является доступным скрытием.

Лучший вариант:
Картинка в данном случае не контентная и значит, её не должно быть в разметке.
Сделайте её псевдоэлементом.
Текст оберните в span с классом visually-hidden и доступно скройте. Легко гуглится по запросам типа "visually-hidden css" или "паттерн visually-hidden".

Вариант похуже:
Оставить картинку в коде, но добавить атрибут aria-hidden="true"

Я думал, что раз у правого flex-shrink-1, то это значит, что он будет сжиматься один, пока не сожмется полностью, а потом уже будут сжиматься как обычно остальные.

Если бы у остальных был 0, то примерно так и было бы. Но только они не стали бы сжиматься меньше минимальной ширины, если указана.
Но у них тоже 1.

С помощью JQuery можно при выборе любого из "фруктов" получить его значение "value"

Сомнительный способ.

На JS
document.querySelector("#mainch").value
https://jsfiddle.net/k9o5186q/

Замените флекс на грид

display: grid;
  grid-template-columns: min-content 1fr;